迁移至 Grid v2

本指南解释了如何以及为何从 Material UI Grid v1 迁移到 v2。

为何应该迁移

Grid v2 具有多个新功能，并且比原始版本有许多改进

Grid v2 使用 CSS 变量，从而消除了类选择器的 CSS 特异性。现在，您可以使用 Grid 上的 sx 属性来控制您想要的任何样式。
所有网格都被视为项，无需指定 item 属性。
期待已久的 offset 功能为您提供了更大的定位灵活性。
嵌套网格现在没有深度限制。

使用 Material UI v4

Grid v2 是在 Material UI v5 中引入的，因此您必须首先遵循 Material UI v5 迁移指南。

使用 Material UI v5

由于大多数 API 保持不变，因此预计迁移过程会很顺利。我们想澄清一个重大更改：Grid v2 中负边距的默认实现是在所有边上均匀分布。

导入

-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';

移除属性

item 和 zeroMinWidth 属性已在 Grid v2 中删除

-<Grid item zeroMinWidth xs={6}>
+<Grid xs={6}>

负边距

如果您想应用类似于 Grid v1 的负边距，请在网格容器上指定 disableEqualOverflow={true}。要应用于所有网格，请将默认属性添加到主题

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Grid from '@mui/material/Unstable_Grid2';

const theme = createTheme({
  components: {
    MuiGrid2: {
      defaultProps: {
        // all grids under this theme will apply
        // negative margin on the top and left sides.
        disableEqualOverflow: true,
      },
    },
  },
});

function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container>...grids</Grid>
    </ThemeProvider>
  );
}

使用 Material UI v6

Grid v2 在 Material UI v6 中标记为稳定版本，因此删除了 Unstable_ 前缀

-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';

随着稳定化的进行，API 也得到了改进。您可以在 Material UI v6 升级指南中查看更改以及有关如何迁移的更多详细信息。

最后，原始 Grid 组件已被弃用，将来将被删除，因此我们强烈建议您迁移到 Grid v2。

文档页面

查看 Grid v2 文档以获取所有演示和代码示例。