React Material UI，卡片间距问题答案

【问题标题】：React Material UI, Card Spacing IssueReact Material UI，卡片间距问题
【发布时间】：2021-10-10 23:04:00
【问题描述】：

我在 React 应用程序中使用 Material UI。我正在使用 Material UI 组件卡，但我得到了一些不想要的结果。我在页面的右边缘得到空白。我希望在“相邻”卡之间创造差距。为此，我实现了以下代码：

    <div>
        <Grid container spacing={10} justify="center">
            <Grid item xs={12}>
                <Card>
                    <CardContent>
                      ...
                    </CardContent>
                </Card>
            </Grid>
            <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
             <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
        </Grid>
    </div>

这会在卡片周围和卡片之间获得所需的间距。但是，它也会在页面右侧添加空白。这样页面现在可以水平滚动了。当我删除 spacing={10} 参数时，这个空间不再存在。有没有办法在不将填充推过屏幕边缘的情况下获得两全其美和卡片之间的间距？

很想听听任何想法！谢谢！

【问题讨论】：

标签： reactjs material-ui jsx

【解决方案1】：

此行为是 Material-UI 的已知限制。你有两个选择：

完全消除间距并使用您自己的 CSS
对父 div 应用填充。例如：

    <div style={{ padding: 30 }} >
        <Grid container spacing={10} justify="center">
            .....
        </Grid>
    </div>

Demo

您可以在 Material-UI 的文档中阅读更多相关信息：https://material-ui.com/components/grid/#negative-margin

【讨论】：