如何修复“失败的道具类型：`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 的一些困惑也引起了我的注意；

容器

• 间距={数字}（数字范围从0到9）

物品

• 通常在容器内使用
• 提供类似于 Css 网格的大小 (xs={12} sm={6} )

但你可以一起使用物品和容器......

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