如何修复“失败的道具类型：`grid`的属性`spacing`必须在`container`上使用？答案

【问题标题】：How to fix "Failed prop type: The property `spacing` of `grid` must be used on `container`?如何修复“失败的道具类型：`grid`的属性`spacing`必须在`container`上使用？
【发布时间】：2019-11-23 16:11:06
【问题描述】：

我目前正在开展一个项目，在该项目中我使用了 React 和 Material-UI 框架。但是，使用网格后会弹出一个错误：

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}
            >
...

然而，一切都在屏幕上正确显示；这个错误仍然弹出。我不确定如何解决这个问题，我很想学习！

【问题讨论】：

看起来问题出在 NavBar 组件中。您已经向我们展示了 AppBar 和 ToolBar。
请提供一个最小的可重现示例，例如一个密码箱。当您从示例中的 Grid 项目中删除间距道具时，我本来希望该错误得到修复。

标签： reactjs grid material-ui console.log

【解决方案1】：

Grid 似乎也让我有些困惑；

容器

spacing={number}（数字范围从 0 到 9）

物品

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

但你可以完全使用物品和容器...

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

【讨论】：

【解决方案2】：

删除spacing={2}

要使用spacing，你可以试试``容器

【讨论】：

【解决方案3】：

您不能在项目网格上放置间距道具。

尝试删除spacing={2}

看看 Grid API MUI

spacing ：定义类型项组件之间的空间。它只能用于类型容器组件。

【讨论】：