警告：失败的道具类型：提供给“ForwardRef（网格）”的无效道具“xs” - 材质 UI 网格中的错误

Question

    <React.Fragment>
  <CssBaseline />
    <ThemeProvider theme={theme}>
      <Grid container direction='column'>
        <Grid item container>
            <Header/>
        </Grid>
        <Grid item container>
          <Grid item xs={0} sm={2}/>
          <Grid item container xs={12} sm={8}>
            <Switch>
              <Route path="/bouquets">
                <Bouquets />
              </Route>
              <Route path='/about'>
                <About />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </Grid>
          <Grid item xs={0} sm={2}/>
        </Grid>
      </Grid>
    </ThemeProvider>
</React.Fragment>

I get the error in the title in the console when running my react app. This is Material UI Grid component, and I don't really understand the error or how to fix it.

Answer 1

You are mixing properties in the GRID component.

Following the mui documentation:https://mui.com/components/grid/#grid-with-multiple-breakpoints

      <Grid container spacing={2}>
        <Grid item xs={6} md={8}>
          <Item>xs=6 md=8</Item>
        </Grid>
        <Grid item xs={6} md={4}>
          <Item>xs=6 md=4</Item>
        </Grid>
        <Grid item xs={6} md={4}>
          <Item>xs=6 md=4</Item>
        </Grid>
        <Grid item xs={6} md={8}>
          <Item>xs=6 md=8</Item>
        </Grid>
      </Grid>

As you can see you have first the Grid with property container. Then inside you can use as many Grid with property item as you want.

But inside of Grid with property item you should have only items(Componets like Typography, Button, Avatar or whatever component you have) and not more Grids.

So your code should be something like:

<React.Fragment>
  <CssBaseline />
    <ThemeProvider theme={theme}>
      <Grid container direction='column'>
        <Grid item >
            <Header/>
        </Grid>
       </Grid>
        <Grid container>
          <Grid item xs={12} sm={8}>
            <Switch>
              <Route path="/bouquets">
                <Bouquets />
              </Route>
              <Route path='/about'>
                <About />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </Grid>
         <Grid/>
    </ThemeProvider>
</React.Fragment>

I hope I have clarified how to use the container or item property in the component and that it helps you to solve your warning.