如何在材质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

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

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>

Answer 2

您只需添加xs为8的空网格。 像这样：

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

Answer 3

我会添加{ "root":{ "Telephone":[ { "country":"ES", "prefix":"+34" }, { "country":"FR", "prefix":"+33" }, { "country":"EN", "prefix":"+44" } ], "Position":[ { "x":"123.23", "y":"98.93" }, { "x":"250.99", "y":"43.89" } ] }, "now":"2021-06-24T11:18:04.077612" } ：

<Box width="100%"/>