React项目Material UI Grid组件xs属性无效prop type报错如何解决？

Material UI Grid组件的响应式尺寸属性xs/sm/md/lg/xl不支持取值为0，合法取值仅为以下三类：

• 1-12之间的整数：代表对应断点下占12栅格中的列数
• 布尔值：true代表自动占满剩余宽度，false代表不设置该断点规则
• 字符串auto：代表宽度由内容撑开

你代码中两处<Grid item xs={0} sm={2}/>传入了xs={0}，不符合PropType校验规则，因此触发警告。

你的原始需求应该是在xs断点下隐藏两侧边栏，sm及以上断点显示占2列的侧边栏，只需将xs={0}替换为sx属性控制显隐即可，修改后的完整代码如下：

<React.Fragment>
  <CssBaseline />
    <ThemeProvider theme={theme}>
      <Grid container direction='column'>
        <Grid item container>
            <Header/>
        </Grid>
        <Grid item container>
          <Grid item sm={2} sx={{ display: { xs: 'none', sm: 'block' } }}/>
          <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 sm={2} sx={{ display: { xs: 'none', sm: 'block' } }}/>
        </Grid>
      </Grid>
    </ThemeProvider>
</React.Fragment>

修改后即可消除警告，同时保留你原本预期的响应式布局效果。

内容的提问来源于stack exchange，提问作者burneverything1