Grid API
导入
import Grid from '@mui/material/Grid';
// 或
import { Grid } from '@mui/material';组件名称
在主题中，名称“MuiGrid”可用于提供默认属性（props），或者样式覆盖属性
原生（Native） 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| children | node | The content of the component. | |
| classes | object | ||
| columns | Array<number> | number | object | 12 | The number of columns. |
| columnSpacing | Array<number | string> | number | object | string | Defines the horizontal space between the type item components. It overrides the value of the spacing prop. | |
| component | elementType | ||
| container | bool | false | If true, the component will have the flex container behavior. You should be wrapping items with a container. |
| direction | 'column-reverse' | 'column' | 'row-reverse' | 'row' | Array<'column-reverse' | 'column' | 'row-reverse' | 'row'> | object | 'row' | Defines the flex-direction style property. It is applied for all screen sizes. |
| item | bool | false | |
| lg | 'auto' | number | bool | false | Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens if not overridden. |
| md | 'auto' | number | bool | false | Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden. |
| rowSpacing | Array<number | string> | number | object | string | Defines the vertical space between the type item components. It overrides the value of the spacing prop. | |
| sm | 'auto' | number | bool | false | Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden. |
| spacing | Array<number | string> | number | object | string | 0 | Defines the space between the type item components. It can only be used on a type container component. |
| sx | Array<func | object | bool> | func | object | ||
| wrap | 'nowrap' | 'wrap-reverse' | 'wrap' | 'wrap' | Defines the flex-wrap style property. It's applied for all screen sizes. |
| xl | 'auto' | number | bool | false | Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens. |
| xs | 'auto' | number | bool | false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
| zeroMinWidth | bool | false |
作为一个 CSS 实用工具， Grid 组件也支持所有
系统 属性。 您可以将它们作为props在组件上直接使用。ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiGrid-root | |
| container | .MuiGrid-container | |
| item | .MuiGrid-item | |
| zeroMinWidth | .MuiGrid-zeroMinWidth | |
| direction-xs-column | .MuiGrid-direction-xs-column | |
| direction-xs-column-reverse | .MuiGrid-direction-xs-column-reverse | |
| direction-xs-row-reverse | .MuiGrid-direction-xs-row-reverse | |
| wrap-xs-nowrap | .MuiGrid-wrap-xs-nowrap | |
| wrap-xs-wrap-reverse | .MuiGrid-wrap-xs-wrap-reverse | |
| spacing-xs-1 | .MuiGrid-spacing-xs-1 | |
| spacing-xs-2 | .MuiGrid-spacing-xs-2 | |
| spacing-xs-3 | .MuiGrid-spacing-xs-3 | |
| spacing-xs-4 | .MuiGrid-spacing-xs-4 | |
| spacing-xs-5 | .MuiGrid-spacing-xs-5 | |
| spacing-xs-6 | .MuiGrid-spacing-xs-6 | |
| spacing-xs-7 | .MuiGrid-spacing-xs-7 | |
| spacing-xs-8 | .MuiGrid-spacing-xs-8 | |
| spacing-xs-9 | .MuiGrid-spacing-xs-9 | |
| spacing-xs-10 | .MuiGrid-spacing-xs-10 | |
| grid-xs-auto | .MuiGrid-grid-xs-auto | |
| grid-xs-true | .MuiGrid-grid-xs-true | |
| grid-xs-1 | .MuiGrid-grid-xs-1 | |
| grid-xs-2 | .MuiGrid-grid-xs-2 | |
| grid-xs-3 | .MuiGrid-grid-xs-3 | |
| grid-xs-4 | .MuiGrid-grid-xs-4 | |
| grid-xs-5 | .MuiGrid-grid-xs-5 | |
| grid-xs-6 | .MuiGrid-grid-xs-6 | |
| grid-xs-7 | .MuiGrid-grid-xs-7 | |
| grid-xs-8 | .MuiGrid-grid-xs-8 | |
| grid-xs-9 | .MuiGrid-grid-xs-9 | |
| grid-xs-10 | .MuiGrid-grid-xs-10 | |
| grid-xs-11 | .MuiGrid-grid-xs-11 | |
| grid-xs-12 | .MuiGrid-grid-xs-12 |
您可以使用组件自定义选项对组件进行个性化：
- 具备 全局类名.
- 在自定义主体中，设定一个规则名称作为组件的
styleOverrides属性的一部分。