Material UI 网格布局和单个项目的宽度答案

【问题标题】：Material UI Grid layout and width of individual itemsMaterial UI 网格布局和单个项目的宽度
【发布时间】：2021-08-25 03:57:48
【问题描述】：

我有一个基于 Material UI 构建的自定义库。我的 JSX 如下所示；

<MyLayout container spacing={2}>
    <MyLayout item xs={9}>                    
        <MyComp1 />
    </MyLayout>
    <MyLayout item xs={2}>                    
        <MyComp2 />
    </MyLayout>
    <MyLayout item xs={1}>                    
        <MyComp3 />
    </MyLayout>
</MyLayout>

现在我的问题是第三个问题，我有 xs={1}，它占据的宽度比我想要的要大。是否可以调整宽度以使其更小？

【问题讨论】：

你能用它创建一个演示吗？使用 Codesandbox 或类似的东西？

标签： css reactjs material-ui

【解决方案1】：

您是否考虑过嵌套一个额外的网格容器？喜欢：

  <Grid container spacing={2}>
    <Grid item xs={9}>
      <Paper className={classes.paper}>item</Paper>
    </Grid>
    <Grid item xs={2}>
      <Paper className={classes.paper}>item</Paper>
    </Grid>
    <Grid item xs={1}>
      <Grid container>
        <Grid item xs={8}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
      </Grid>
    </Grid>
  </Grid>

您可以查看codesandbox here

【讨论】：