时间戳

首页 > 解决方案 > React Material UI，卡片间距问题

reactjs - React Material UI，卡片间距问题

问题描述

我在反应应用程序中使用 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}参数时，这个空间不再存在。有没有办法在不将填充推到屏幕边缘的情况下获得两全其美和卡片之间的间距？

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

标签： reactjsmaterial-uijsx

解决方案

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

  1. 完全消除间距并使用您自己的 CSS
  2. 将填充应用于父 div。前任：
    <div style={{ padding: 30 }} >
        <Grid container spacing={10} justify="center">
            .....
        </Grid>
    </div>

演示

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

推荐阅读