如何修復“失敗的道具類型：`grid` 的屬性`spacing` 必須用於`container`？

Question

我目前正在做一個項目，在這個項目中我使用了 React 和 Material-UI 框架。 但是，使用 grid 后會彈出一個錯誤消息：

checkPropTypes.js:20 Warning: Failed prop type: The property `spacing` of `Grid` must be used on `container`.
    in WithStyles(ForwardRef(Grid)) (created by NavBar)
    in NavBar (created by Root)
    in Root

我已經檢查了我的所有代碼，並且 Grid 容器確實使用了spacing道具。 我還嘗試從 Grid 項目中刪除間距，這會導致更多錯誤。

<BrowserRouter>
      <AppBar position="static">
        <Toolbar style={navStyle}>
          <Grid
            justify="space-between"
            container
            spacing={10}
          >
            <Grid
              item
              spacing={2}
            >
...

然而，一切都正確地顯示在屏幕上； 這個錯誤仍然彈出。 我不確定如何解決這個問題，很想學習！

Answer 1

您不能在項目網格上放置間距道具。

只需嘗試刪除spacing={2}

並查看 Grid API MUI

間距：定義類型項組件之間的間距。 它只能用於類型容器組件。

Answer 2

似乎也有一些關於Grid 的困惑也吸引了我；

容器

• 間距={number}（數字范圍從 0 到 9）

物品

• 通常在容器內使用
• 提供類似於 Css Grid 的大小 (xs={12} sm={6} )

但是您可以完全使用 Item & Container...

<Grid container item xs={12} spacing={3}>
    ....
</Grid>

Answer 3

刪除spacing={2}

要使用spacing您可以嘗試 ``containers