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