React MUI容器API

Material-UI 是一个用户界面库，提供了预定义和可自定义的React组件，用于更快速和简便的Web开发，这些Material-UI组件基于谷歌的Material Design。在本文中，让我们讨论一下Material-UI库中的容器API。

容器用于水平居中内容。它是最基本的布局元素。在Material UI中，我们有一个组件，通过它的props用于多种目的。

Props列表：

classes: 它用于添加或重写组件的样式。
component: 它主要用于根节点。
disableGutters: 如果设置为true，则左右的padding会被移除。
fixed: 它尝试将max-width设置为当前断点的min-width。
maxWidth: 它用于设置容器的最大宽度，因为容器的宽度随着屏幕大小的增加而增加。您可以将其设置为false以禁用maxWidth。
sx: 它可以用于覆盖系统和额外的CSS样式。

流体容器： 流体容器的宽度由maxWidth prop的值限制。

语法：

<Container>This is container</Container>

安装 React 应用：

步骤1： 使用以下命令创建一个 React 应用。

npx create-react-app container-example

步骤2： 现在进入项目目录。

cd container-example

安装Material-UI：

通过npm/yarn安装Material-UI的源文件，并且它们会自动注入所需的CSS。

npm install @material-ui/core
OR
yarn add @material-ui/core

项目结构：

React MUI容器API

导入容器：

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

示例1： 在此示例中，我们将看到容器的宽度随屏幕大小而增长。

import * as React from 'react'; 
import CssBaseline from '@mui/material/CssBaseline'; 
import Box from '@mui/material/Box'; 
import Container from '@mui/material/Container'; 
  
export default function SimpleContainer() { 
    return ( 
        <React.Fragment> 
            <CssBaseline /> 
            <Container maxWidth="sm"> 
                <Box sx={{ bgcolor: '#ffe8dc',  
                    height: '100vh' }} > 
                    <h1>GFG Container API</h1> 
                    <h2>Fluid Container</h2> 
                </Box> 
            </Container> 
        </React.Fragment> 
    ); 
}

输出：

React MUI容器API

固定容器：

我们使用固定容器来设计固定尺寸的布局。

示例2：

在这个示例中，我们将设置最大宽度与当前断点的最小宽度相匹配。

import * as React from 'react'; 
import CssBaseline from '@mui/material/CssBaseline'; 
import Box from '@mui/material/Box'; 
import Container from '@mui/material/Container'; 
  
export default function FixedContainer() { 
    return ( 
        <React.Fragment> 
            <CssBaseline /> 
            <Container fixed> 
                <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} > 
                    <h1>GFG Container API</h1> 
                    <h2>Fixed Container</h2> 
                </Box> 
            </Container> 
        </React.Fragment> 
    ); 
}

输出:

React MUI容器API