How to fix "Failed prop type: The property `spacing` of `grid` must be used on `container`?

Question

I am currently working on a project in which I utilize React and the Material-UI framework. However, after using grid an error pops up saying:

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. I have also tried removing spacing from Grid item and this causes more errors.

<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!

Answer 1

You can't put spacing prop on an item grid.

Just try to remove the spacing={2}

And take a look on the Grid API MUI

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

Answer 2

There seems to be some confusion about Grid that caught me too;

Container

• spacing={number} (number ranging from 0 to 9)

Item

• Usually used within containers
• Sizing similar to Css Grid is provided (xs={12} sm={6} )

But You can use Item & Container altogether...

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