[英]How to fix "Failed prop type: The property `spacing` of `grid` must be used on `container`?
I am currently working on a project in which I utilize React and the Material-UI framework.我目前正在做一个项目,在这个项目中我使用了 React 和 Material-UI 框架。 However, after using grid an error pops up saying:
但是,使用 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
I have already checked all of my code and the Grid container does use the spacing
prop.我已经检查了我的所有代码,并且 Grid 容器确实使用了
spacing
道具。 I have also tried removing spacing from Grid item and this causes more errors.我还尝试从 Grid 项目中删除间距,这会导致更多错误。
<BrowserRouter>
<AppBar position="static">
<Toolbar style={navStyle}>
<Grid
justify="space-between"
container
spacing={10}
>
<Grid
item
spacing={2}
>
...
Everything is showing up on the screen properly, however;然而,一切都正确地显示在屏幕上; this error still pops up.
这个错误仍然弹出。 I am unsure how to fix this and would love to learn!
我不确定如何解决这个问题,很想学习!
You can't put spacing prop on an item grid.您不能在项目网格上放置间距道具。
Just try to remove the spacing={2}
只需尝试删除
spacing={2}
And take a look on the Grid API MUI并查看 Grid API MUI
spacing : Defines the space between the type item component.
间距:定义类型项组件之间的间距。 It can only be used on a type container component.
它只能用于类型容器组件。
There seems to be some confusion about Grid that caught me too;似乎也有一些关于Grid 的困惑也吸引了我;
Container容器
Item物品
But You can use Item & Container altogether...但是您可以完全使用 Item & Container...
<Grid container item xs={12} spacing={3}>
....
</Grid>
Remove spacing={2}
删除
spacing={2}
To use spacing
you can try ``containers要使用
spacing
您可以尝试 ``containers
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.