React MUI 容器布局

React MUI 是一个 UI 库，提供了完全加载的组件，将我们自己的设计系统应用到我们的准备就绪的组件中。MUI 是一个用户界面库，提供了预定义和可定制的 React 组件，用于更快速和简单的 Web 开发，这些 Material-UI 组件基于 Google 的 Material Design。

在本文中，我们将讨论 React MUI 容器布局。容器是最基本的布局元素，也是一个水平居中内容的构建块。

容器布局变体：

Fluid（流式）： 流式容器的宽度由 maxWidth 属性的值限制。
Fixed（固定）： 如果您更喜欢针对一组固定大小进行设计，而不是尝试适应完全流式的视口，您可以设置 fixed 属性。max-width 与当前断点的 min-width 相匹配。
API： 容器布局中使用的 API 是：

语法：

<Container>
    ...
</Container>

创建React项目：

步骤1： 通过npm命令安装React模块来创建React应用。

npm create-react-app project name

步骤2： 创建完你的React项目后，进入该文件夹执行不同的操作。

cd project name

步骤3： 创建 ReactJS 应用后，使用以下命令安装所需模块：

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

项目结构：

React MUI 容器布局

运行应用程序的步骤: 打开终端并输入以下命令。

npm start

示例1: 下面的示例演示了React MUI Fluid容器布局。

import * as React from "react"; 
import Container from "@mui/material/Container"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI Container Layout</h2> 
            </div> 
            <div> 
                <Container maxWidth="md"> 
                    <div 
                        style={{ 
                            backgroundColor: "lightgreen", 
                            height: "30em", 
                            display: "flex", 
                            alignItems: "center", 
                            justifyContent: "center", 
                        }} 
                    > 
                        <h1>Fluid Layout with <span  
                            style={{ color: 'green' }}>"md"</span> 
                                as maxWidth</h1> 
                    </div> 
                </Container> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI 容器布局

示例2： 下面的示例演示了React MUI固定容器布局。

import * as React from "react"; 
import Container from "@mui/material/Container"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI Container Layout</h2> 
            </div> 
            <div> 
                <Container fixed> 
                    <div 
                        style={{ 
                            backgroundColor: "green", 
                            height: "30em", 
                            display: "flex", 
                            alignItems: "center", 
                            justifyContent: "center", 
                        }} 
                    > 
                        <h1 style={{ color: 'white' }}>Fixed Layout</h1> 
                    </div> 
                </Container> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React MUI 容器布局