React MUI布局组件

React Material-UI (MUI) 是一个流行的库，提供了一套用于构建React应用程序用户界面的可重用组件。这些组件基于Google开发的Material Design设计系统，为创建外观漂亮、用户友好的界面提供了准则。

布局组件是指 一种用于组织应用程序UI结构和布局的组件类型。

MUI提供各种类型的布局组件：

组件	描述
盒子	此组件为内容提供了添加内边距和外边距的方式。
容器	此组件为内容提供了应用最大宽度和其他布局样式的方式。
网格	此组件提供了一种将内容以行和列的网格方式排列的方式。
堆叠	此组件指的是将多个UI元素垂直或水平地堆叠在一起的布局策略。
图片列表	此组件是基于网格的图像展示，通常用于以指定列数在网格中显示图像集合。
隐藏	此组件是一种可以通过将元素的可见性设置为false来隐藏元素的属性。

安装 React 应用： 使用以下命令创建 React 应用：

npx create-react-app example

在我们的应用中安装MUI库：

使用以下命令在我们的应用程序中设置/安装MUI库：

npm install @mui/material @emotion/react @emotion/styled

导入 Material UI 库：

import Box from '@mui/material/Box';

项目结构： 现在你的项目结构应该如下所示：

React MUI布局组件

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：

npm start

示例: 将Box从‘div’更改为另一个组件。

import React from 'react'; 
import Box from "@mui/material/Box"; 
    
function App() { 
    return ( 
        <div> 
            <Box component='h2'> 
                Hello GFG 
            </Box> 
        </div> 
    ); 
} 
    
export default App;