Material UI 网格：在更宽的屏幕上按钮之间需要空间

Question

我有一个非常简单的布局，我需要在宽屏幕上并排放置两个按钮。然而，我需要它们之间有大约 10 像素的距离，不幸的是，添加边距会将按钮推到一边。我认为添加justify='space-between可以解决这个问题，但它没有任何作用。这就是我的代码的样子：const MyComponent = () => (    <div style={{ width: 500 }}>        <div style={{ width: '100%' }}>            <Grid container justify='space-between'>                <Grid item xl={6} lg={6} md={6} sm={12} xs={12}>                    <Button variant='contained'>                        Left Side Button                    </Button>                </Grid>                <Grid item xl={6} lg={6} md={6} sm={12} xs={12}>                    <Button variant='contained'>                        Right Side Button                    </Button>                </Grid>            </Grid>        </div>    </div>)结果如下：不管怎样，我怎样才能在它们之间添加大约 10 像素而不让它们也被推开 10 像素呢？

Answer 1

您可以在父容器上设置间距属性：

<Grid container spacing={2} justify='space-between'>

这应该会增加所有子元素之间的间距。尽管它应用 8px 倍数的间距。因此，如果您恰好需要 10px，则必须在自定义主题中覆盖该属性。

这是该道具的文档spacing：

https://material-ui.com/components/grid/#spacing