Javascript 无法将物料ui网格列表居中

我有一个

网格列表

，用于显示

卡片

。这些组件的样式如下所示：

card.js

grid.js

然而，无论我尝试什么属性组合，我都无法使卡片在中心对齐。我总是留下这样的东西：

---

其中

网格列表

偏离中心。我已经阅读了

材料ui

文档，查看了大量类似的解释，但没有任何效果。请帮忙

指定

边距：0自动在顶级容器元素上，但是您没有为该元素提供使此自动边距生效的任何样式。您需要为元素指定一个宽度门，这样自动边距实际上会在任意一侧留出空间

const ContainerWrapper = styled.div`
    margin: 0 auto;
    max-width: 1040px;
`

我从你定义的卡的大小中得到了1040。240宽度和每侧10边距意味着20像素的空间（第一张卡10px在右侧，第二张卡10px在左侧）
260*4=1040
：）
什么是
ThickSpace
？听起来像是一个奇怪的间距问题的罪魁祸首：）对不起，@JohnRuddell它只是一个固定高度的空组件，用于间距，我应该澄清一下，为什么不使用css网格作为间距？嗯，你没有在父级
容器rapper
上指定最大宽度，所以它基本上是全宽的，您需要将其设置为最大宽度，与并排4张卡的大小相匹配，以使其居中<代码>最大宽度：1040px我想我会给你一个答案：）
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        overflow: 'hidden'
    },
    gridList: {
        width: '80%',
        height: '100%'
    }
}))

export default function CardGridList() {
const classes = useStyles()

return (
    <div className={classes.root}>
        <GridList className={classes.gridList} cols={4}>
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
        </GridList>
    </div>
    )
}

const ContainerWrapper = styled.div`
    margin: 0 auto;
`

export default class Container extends React.Component {
    render() {
        return (
            <ContainerWrapper>
                <ThickSpace />
                <CardGridList />
            </ContainerWrapper>
        )
    }
}

const ContainerWrapper = styled.div`
    margin: 0 auto;
    max-width: 1040px;
`