如何在 Material ui 中为网格项添加新行？

Question

我将像这样打破一行网格项目。 正如您所看到的图像，网格的其余空间应该是空的。

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

我应该使用内部grid container吗？或者我应该使用display flex？

Answer 1

我想补充一点<Box width="100%"/>：

    <Grid container spacing={3}
      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
      <Grid item xs={4}>
        "Grid Item xs={4}"
      </Grid>

      <Box width="100%"/> // empty space

      <Grid item xs={12}>
        "Grid Item xs={12}"
      </Grid>
    </Grid>

Answer 2

我创建了新组件来解决这个问题：

export const GridBreak = styled.div`
  width: 100%
`;

那么你的代码将如下所示：

<Grid container spacing={3}>
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  <GridBreak />
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>