材料ui：reactjs：网格如何添加边距答案

【问题标题】：material ui: reactjs: Grid how to add margin材料ui：reactjs：网格如何添加边距
【发布时间】：2021-04-08 03:41:16
【问题描述】：

我在material-ui reactjs中有以下Grid

    <Grid container direction="row" justify="flex-end" alignItems="center">
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
    </Grid>
    <Grid container>
      <Grid item xs>
        <Paper>
          testing
        </Paper>
      </Grid>
    </Grid>

显示为

现在我想要两个容器之间有一些间隙。

我试过了

    <Grid container direction="row" justify="flex-end" alignItems="center">
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
    </Grid>
    <Grid container m={2}>
      <Grid item xs>
        <Paper>
          testing
        </Paper>
      </Grid>
    </Grid>

我还是一样

【问题讨论】：

试试：<Grid container spacing={2}。见Spacing
但我只想添加上边距
如果您使用 MUI v5.您可以使用Stack 仅设置孩子之间的空间。否则，将孩子包裹在 Box 中，并像这样设置边距顶部：<Box mt={2}
你的意思是把<Grid container>包裹在<Box mt={2}>里面
将<Grid container m={2}> 放入Box 并删除m={2}，因为它不是Grid 的有效道具。 m（边距）是system property。只有Box 支持。

标签： reactjs material-ui

【解决方案1】：

你可以为它使用内联样式，但如果你不想使用内联样式，请将它们放在另一个容器中并在第一个容器中添加间距

<Grid container spacing={2}>
    <Grid container item xs={12} direction="row" justify="flex-end" alignItems="center">
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
      <Grid item>
        <Paper>
          test
        </Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12}>
      <Grid item>
        <Paper>
          testing
        </Paper>
      </Grid>
    </Grid>
</Grid>

【讨论】：

好的，我只想要间距，而不是边