跳到内容

栅格2API

React Grid2 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

import Grid2 from '@mui/material/Grid2';
// or
import { Grid2 } from '@mui/material';

通过阅读有关最小化包大小的指南了解差异。

属性

原生组件的属性也可用。

名称类型默认值描述
children节点-

组件的内容。

columnsArray<number>
| number
| object		12

列数。

columnSpacingArray<number
| string>
| number
| object
| string		-

定义类型为 item 的组件之间的水平间距。它会覆盖 spacing 属性的值。

container布尔值false

如果为 true，则组件将具有 flex *container* 行为。您应该使用 *container* 包裹 *items*。

direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object		'row'

定义 flex-direction 样式属性。它适用于所有屏幕尺寸。

offsetstring
| number
| Array<string
| number>
| object		-

定义类型为 item 的组件的偏移值。

rowSpacingArray<number
| string>
| number
| object
| string		-

定义类型为 item 的组件之间的垂直间距。它会覆盖 spacing 属性的值。

sizestring
| bool
| number
| Array<string
| bool
| number>
| object		-

定义类型为 item 的组件的大小。

spacingArray<number
| string>
| number
| object
| string		0

定义类型为 item 的组件之间的间距。它只能在类型为 container 的组件上使用。

wrap'nowrap'
| 'wrap-reverse'
| 'wrap'		'wrap'

定义 flex-wrap 样式属性。它适用于所有屏幕尺寸。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiGrid2 通过主题更改此组件的默认属性。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiGrid2-containercontainer如果 container={true}，则应用于根元素的样式。
.MuiGrid2-rootroot应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中没有找到信息，请考虑查看组件的实现以获取更多详细信息。