遷移至 Grid v2

本指南說明如何以及為何從 Material UI Grid v1 遷移至 v2。

為何您應該遷移

Grid v2 比原始版本具有多項新功能和許多改進之處

Grid v2 使用 CSS 變數，這會從類別選擇器中移除 CSS 特異性。現在您可以在 Grid 上使用 sx 屬性來控制您想要的任何樣式。
所有網格都被視為項目，而無需指定 item 屬性。
期待已久的偏移功能可讓您更靈活地進行定位。
巢狀網格現在沒有深度限制。

使用 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 文件，以取得所有示範和程式碼範例。