MUI Grid 项目之间的间距答案

【问题标题】：Spacing between MUI Grid itemsMUI Grid 项目之间的间距
【发布时间】：2019-12-27 16:32:30
【问题描述】：

我正在创建一个大致如下的网格布局：

Mon   Tue   Wed   Thu
This is a very very very very very very very very ...                          11.11% achieved

我快到了，但无法获得工作日之间的间距（嵌套在 Typography 组件中）。相反，尽管我指定了间距，但它会折叠空间。

这是我的代码。如何控制工作日之间的间隔？

在此处查看代码框：https://codesandbox.io/s/material-ui-playground-vn9p6

<Grid container justify="space-between" alignItems="center">
  <Grid item xs={9} container direction="column" spacing={1}>
    <Grid item container spacing={4}>
      <Grid item>
        <Typography variant="caption">Man</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Tir</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Ons</Typography>
      </Grid>
      <Grid item>
        <Typography variant="caption">Tor</Typography>
      </Grid>
    </Grid>

    <Grid item xs>
      <Typography variant="title" noWrap>
        Here is a really really really really really really really really
        really really really really long title
      </Typography>
    </Grid>
  </Grid>

  <Grid item xs={3} container justify="flex-end">
    <Grid item>
      <Typography variant="body">11.11% achieved</Typography>
    </Grid>
  </Grid>
</Grid>

【问题讨论】：

标签： reactjs flexbox material-ui

【解决方案1】：

请注意，此答案只是身份验证演示的调试解决方案。

基本上将xs 添加到您的Grid item 的子网格组件中，以定义每个项目的宽度以满足您对间距的需求

<Grid item container spacing={12}>
  <Grid item xs={2}>

参考文档和演示material-ui / grid / spacing
以及相关回答here

【讨论】：