Question

简而言之，希望将间距添加到2列网格（xs = {6}）中，但是在更新新间距之后，它似乎不起作用。重做后，还有其他人在Mui间距上取得成功吗？

我已经尝试从Mui站点（https://material-ui.com/components/grid/#spacing）复制/粘贴示例。当然，我之前使用的是间距，效果很好，但是更改之后，没有间距发生。

<Grid container spacing={3}>
   <Grid item xs={12}>
     <Paper className={classes.paper}>xs=12</Paper>
   </Grid>
   <Grid item xs={6}>
     <Paper className={classes.paper}>xs=6</Paper>
   </Grid>
   <Grid item xs={6}>
     <Paper className={classes.paper}>xs=6</Paper>
   </Grid>
</Grid>

预期-网格项目的大小为6时，它们不会接触

实际-网格项很动人

这感觉应该很简单，但是由于使用了MUI SOOOO太多了，所以我在求助时向SO寻求帮助！

Answer 1

网格的spacing属性changed from v3 to v4的有效值。在v3中，您需要使用8的倍数，因此v4的spacing={3}的等效项为spacing={24}。如果您检查控制台，则应该看到有关“ 3”是无效间距值的错误（如果使用v3）。

以下是一个示例（基于您问题中的代码）来证明这一点：

v3：https://codesandbox.io/s/grid-spacing-v3-w3ubl

v4：https://codesandbox.io/s/grid-spacing-v4-pwi73

Mui Spacing V4无法使用。尽管有新的间距枚举，但间距似乎被网格大小覆盖

1 个答案: