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

【问题标题】：How to add a new row for grid item in material ui?如何在材质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？

【问题讨论】：

标签： css reactjs flexbox material-ui css-grid

【解决方案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 width="100%"/> // empty space

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

【讨论】：