在material-ui网格中自定义行间距的最佳方法是什么？答案

【问题标题】：What is the best way for custom spacing between rows in material-ui grid?在material-ui网格中自定义行间距的最佳方法是什么？
【发布时间】：2020-04-16 01:44:28
【问题描述】：

在 material-ui 中的网格内设置特定行间距的最佳方法是什么？

例如，给定以下带有spacing={0} 的网格。

GridContainer
row1    GridItem GridItem
row2    GridItem GridItem
row3    GridItem GridItem
row4    GridItem GridItem

目标是具有间距为 0 的相同网格，但在第 2 行和第 3 行之间具有自定义间距

GridContainer
row1    GridItem GridItem
row2    GridItem GridItem

row3    GridItem GridItem
row4    GridItem GridItem

我尝试将mt={2) 放在第三行的 GridItems 中，但没有成功。我通过通过 className 属性传递的自定义类实现了该行为，但我不确定这是否是最好的方法。

干杯

【问题讨论】：

标签： javascript reactjs material-ui grid-system mui

【解决方案1】：

<Grid container layout={"row"} spacing={10} >
   <Grid item xs={12} md={3}>
      <div style={{height: "100%", paddingTop: 5}}>add your component here</div>
   </Grid>
</Grid>

【讨论】：

我认为通过 className 会更好，因为您可以省略 div-wrapper
是的，这也是可能的，设置 className 并在你的 css 中设置样式
这就是我现在正在做的，但似乎应该有一个我不知道的“更好”的解决方案，因此是这个问题的原因
是的，我们必须等待其他人。