跳到主要内容跳到主要内容
🚀 影响 Material UI 2025 年的路线图！参与最新的开发者调查

GridLegacyAPI

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

演示

导入

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

要了解差异，请阅读关于最小化捆绑包大小的指南。

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下方的 CSS 类 API。

columnsArray<number>
| number
| object		12

列数。

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

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

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

containerboolfalse

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

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

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

itemboolfalse

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

lg'auto'
| number
| bool		false

如果是一个数字，则设置网格项使用的列数。它不能大于容器的总列数（默认为 12）。如果为 'auto'，则网格项的宽度与其内容匹配。如果为 false，则忽略该 prop。如果为 true，则网格项的宽度会增长以使用网格容器中的可用空间。该值应用于 lg 断点和更宽的屏幕（如果未被覆盖）。

md'auto'
| number
| bool		false

如果是一个数字，则设置网格项使用的列数。它不能大于容器的总列数（默认为 12）。如果为 'auto'，则网格项的宽度与其内容匹配。如果为 false，则忽略该 prop。如果为 true，则网格项的宽度会增长以使用网格容器中的可用空间。该值应用于 md 断点和更宽的屏幕（如果未被覆盖）。

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

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

sm'auto'
| number
| bool		false

如果是一个数字，则设置网格项使用的列数。它不能大于容器的总列数（默认为 12）。如果为 'auto'，则网格项的宽度与其内容匹配。如果为 false，则忽略该 prop。如果为 true，则网格项的宽度会增长以使用网格容器中的可用空间。该值应用于 sm 断点和更宽的屏幕（如果未被覆盖）。

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

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

sxArray<func
| object
| bool>
| func
| object		-

系统 prop，允许定义系统覆盖以及其他 CSS 样式。

有关更多详细信息，请参阅 `sx` 页面。

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

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

xl'auto'
| number
| bool		false

如果是一个数字，则设置网格项使用的列数。它不能大于容器的总列数（默认为 12）。如果为 'auto'，则网格项的宽度与其内容匹配。如果为 false，则忽略该 prop。如果为 true，则网格项的宽度会增长以使用网格容器中的可用空间。该值应用于 xl 断点和更宽的屏幕（如果未被覆盖）。

xs'auto'
| number
| bool		false

如果是一个数字，则设置网格项使用的列数。它不能大于容器的总列数（默认为 12）。如果为 'auto'，则网格项的宽度与其内容匹配。如果为 false，则忽略该 prop。如果为 true，则网格项的宽度会增长以使用网格容器中的可用空间。该值应用于所有屏幕尺寸，优先级最低。

zeroMinWidthboolfalse

如果为 true，它会在 item 上设置 min-width: 0。请参阅文档的限制部分，以更好地理解用例。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiGridLegacy 通过主题更改此组件的默认 props。

CSS 类

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

类名规则名称描述
.MuiGridLegacy-containercontainer如果 container={true}，则应用于根元素的样式。
.MuiGridLegacy-direction-xs-columndirection-xs-column如果 direction="column"，则应用于根元素的样式。
.MuiGridLegacy-direction-xs-column-reversedirection-xs-column-reverse如果 direction="column-reverse"，则应用于根元素的样式。
.MuiGridLegacy-direction-xs-row-reversedirection-xs-row-reverse如果 direction="row-reverse"，则应用于根元素的样式。
.MuiGridLegacy-grid-xs-1grid-xs-1
.MuiGridLegacy-grid-xs-10grid-xs-10
.MuiGridLegacy-grid-xs-11grid-xs-11
.MuiGridLegacy-grid-xs-12grid-xs-12
.MuiGridLegacy-grid-xs-2grid-xs-2
.MuiGridLegacy-grid-xs-3grid-xs-3
.MuiGridLegacy-grid-xs-4grid-xs-4
.MuiGridLegacy-grid-xs-5grid-xs-5
.MuiGridLegacy-grid-xs-6grid-xs-6
.MuiGridLegacy-grid-xs-7grid-xs-7
.MuiGridLegacy-grid-xs-8grid-xs-8
.MuiGridLegacy-grid-xs-9grid-xs-9
.MuiGridLegacy-grid-xs-autogrid-xs-auto
.MuiGridLegacy-grid-xs-truegrid-xs-true
.MuiGridLegacy-itemitem如果 item={true}，则应用于根元素的样式。
.MuiGridLegacy-rootroot应用于根元素的样式。
.MuiGridLegacy-spacing-xs-1spacing-xs-1
.MuiGridLegacy-spacing-xs-10spacing-xs-10
.MuiGridLegacy-spacing-xs-2spacing-xs-2
.MuiGridLegacy-spacing-xs-3spacing-xs-3
.MuiGridLegacy-spacing-xs-4spacing-xs-4
.MuiGridLegacy-spacing-xs-5spacing-xs-5
.MuiGridLegacy-spacing-xs-6spacing-xs-6
.MuiGridLegacy-spacing-xs-7spacing-xs-7
.MuiGridLegacy-spacing-xs-8spacing-xs-8
.MuiGridLegacy-spacing-xs-9spacing-xs-9
.MuiGridLegacy-wrap-xs-nowrapwrap-xs-nowrap如果 wrap="nowrap"，则应用于根元素的样式。
.MuiGridLegacy-wrap-xs-wrap-reversewrap-xs-wrap-reverse如果 wrap="reverse"，则应用于根元素的样式。
.MuiGridLegacy-zeroMinWidthzeroMinWidth如果 zeroMinWidth={true}，则应用于根元素的样式。

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

源代码

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