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

Question

在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 放在第 3 行，但它不起作用。我通过通过 className 属性传递的自定义类实现了该行为，但我不确定这是否是最好的方法。

干杯

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