reactjs - 如何修复必须在 "Failed prop type: The property ` 上使用的 `grid` 的 `container` 间距?

标签 reactjs grid material-ui console.log

我目前正在做一个项目,在这个项目中我使用了 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 Prop 。
我还尝试从 Grid 项目中删除间距,这会导致更多错误。
<BrowserRouter>
      <AppBar position="static">
        <Toolbar style={navStyle}>
          <Grid
            justify="space-between"
            container
            spacing={10}
          >
            <Grid
              item
              spacing={2}
            >
...

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

最佳答案

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

尝试删除 spacing={2}
并查看 Grid API MUI

spacing : Defines the space between the type item component. It can only be used on a type container component.

关于reactjs - 如何修复必须在 "Failed prop type: The property ` 上使用的 `grid` 的 `container` 间距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57031580/

相关文章:

node.js - package.json 脚本在 heroku 上失败

css - Bootstrap 4 自定义网格

asp.net-mvc - 内联编辑模式动态对象

reactjs - Material ui 中的 <Grid> 导致水平滚动 - React

reactjs - 在 Material-UI 中的自动完成选项末尾附加一个按钮

reactjs - 如何改变material-ui对话框的位置?

javascript - 在 next.js 中调试获取操作

javascript - ReactTable v7 - noDataText 未显示在空数据上(使用 useTableHook)

用于 Django 中动态内容的 CSS Grid/Flexbox

javascript - 将一个类导入到react中