极客教程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';
项目结构： 现在你的项目结构应该如下所示：
运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：
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;
输出：
