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

Posted 2023-03-06

【中文标题】如何在材质ui中为网格项添加新行？

【英文标题】：How to add a new row for grid item in material ui?

【发布时间】：2020-11-27 09:23:40

【问题描述】：

我将像这样打破一行网格项目。 如图所示，网格的剩余空间应该是空的。

<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？

【参考方案1】：

您可以只添加 8 的 xs 的空网格。 像这样：

<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>

【讨论】：

当然，我知道它有效。 md 或其他响应大小的情况如何？我也应该使用隐藏组件吗？不是那个！

【参考方案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>

【讨论】：

我不确定这是解决我的问题的最佳方法，但它似乎是一个不错的选择。所以检查一下。

【参考方案3】：

我会添加<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 /> // empty space

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