Grid API
想要学习更多组件属性和 CSS API,可以查阅 React Grid 组件的 API 文档。
导入
import Grid from '@mui/system/Unstable_Grid/Grid.tsx/Grid';
// 或
import { Grid } from '@mui/system/Unstable_Grid/Grid.tsx';
属性
原生(Native) 组件的属性也是可用的。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
children | node | The content of the component. | |
columns | Array<number> | number | object | 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. | |
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 | Defines the flex-direction style property. It is applied for all screen sizes. | |
disableEqualOverflow | bool | false | |
lg | 'auto' | number | bool | Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens if not overridden. | |
lgOffset | 'auto' | number | ||
md | 'auto' | number | bool | Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden. | |
mdOffset | 'auto' | number | ||
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 | Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden. | |
smOffset | 'auto' | number | ||
spacing | Array<number | string> | number | object | string | Defines the space between the type item components. It can only be used on a type container component. | |
wrap | 'nowrap' | 'wrap-reverse' | 'wrap' | Defines the flex-wrap style property. It's applied for all screen sizes. | |
xl | 'auto' | number | bool | Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens. | |
xlOffset | 'auto' | number | ||
xs | 'auto' | number | bool | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | |
xsOffset | 'auto' | number |
作为一个 CSS 实用工具, Grid 组件也支持所有
系统
属性。 您可以将它们作为props在组件上直接使用。ref
则会被传递到根元素中。