Material UI 网格：在较宽的屏幕上，按钮之间需要 space

Question

我有一个非常简单的布局，我需要在宽屏幕上并排放置两个按钮。但是我需要它们之间有大约 10px 的距离，不幸的是添加边距会将按钮推到一边。我认为添加 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>
)

结果如下：

无论如何，我怎样才能在它们之间添加大约 10px 而不会将它们也推开 10px？

Answer 1

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

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

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

这是 spacing 道具的文档：

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

Material UI 网格：在较宽的屏幕上，按钮之间需要 space

Material UI Grid: need space in between buttons on wider screens

javascript

reactjs

material-ui

grid-layout