React Material UI，卡片間距問題

Question

我在反應應用程序中使用 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}參數時，這個空間不再存在。 有沒有辦法在不將填充推到屏幕邊緣的情況下獲得兩全其美和卡片之間的間距？

很想聽聽任何想法！ 謝謝！

Answer 1

此行為是 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

Answer 2

您可以在每個內部網格組件上使用邊距或填充