容器API
React Container 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。
演示
导入
import Container from '@mui/material/Container';
// or
import { Container } from '@mui/material';阅读这篇关于最小化 bundle 大小的指南，了解它们之间的区别。
原生组件的 Props 也可用。
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| classes | object | - | 覆盖或扩展应用于组件的样式。 有关更多详细信息，请参见下面的 CSS classes API。 |
| component | elementType | - | 用于根节点的组件。可以是用于 HTML 元素的字符串，也可以是组件。 |
| disableGutters | bool | false | 如果为 |
| fixed | bool | false | 设置 max-width 以匹配当前断点的 min-width。如果您希望为一组固定的尺寸进行设计，而不是尝试适应完全流式的视口，这将非常有用。默认情况下是流式的。 |
| maxWidth | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | string | 'lg' | 确定容器的 max-width。容器宽度随屏幕尺寸增大而增大。设置为 false 以禁用 maxWidth。 |
| sx | Array<func | object | bool> | func | object | - | 允许定义系统覆盖以及其他 CSS 样式的系统 prop。 有关更多详细信息，请参见 `sx` 页面。 |
`ref` 被转发到根元素。
主题默认 props
您可以使用 MuiContainer 通过主题更改此组件的默认 props。
这些类名对于使用 CSS 进行样式设置非常有用。当触发特定状态时，它们会应用于组件的插槽。
| 类名 | 规则名称 | 描述 |
|---|---|---|
| .MuiContainer-disableGutters | disableGutters | 如果 disableGutters={true}，则应用于根元素的样式。 |
| .MuiContainer-fixed | fixed | 如果 fixed={true}，则应用于根元素的样式。 |
| .MuiContainer-maxWidthLg | maxWidthLg | 如果 maxWidth="lg"，则应用于根元素的样式。 |
| .MuiContainer-maxWidthMd | maxWidthMd | 如果 maxWidth="md"，则应用于根元素的样式。 |
| .MuiContainer-maxWidthSm | maxWidthSm | 如果 maxWidth="sm"，则应用于根元素的样式。 |
| .MuiContainer-maxWidthXl | maxWidthXl | 如果 maxWidth="xl"，则应用于根元素的样式。 |
| .MuiContainer-maxWidthXs | maxWidthXs | 如果 maxWidth="xs"，则应用于根元素的样式。 |
| .MuiContainer-root | root | 应用于根元素的样式。 |
您可以使用以下自定义选项之一覆盖组件的样式
- 使用全局类名。
- 使用作为自定义主题中组件的 styleOverrides 属性一部分的规则名称。
源代码
如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。