无法将材质UI GridList居中

Question

我有一个GridList，用于显示Cards。这些组件的样式如下：

  

card.js

const useStyles = makeStyles({
    card: {
        maxWidth: 240,
        margin: 10
    },
    media: {
        height: 100
    }
})

  

grid.js

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>
    )
}

  

最后是container.js（使用styled-components）

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

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

但是，无论我尝试哪种组合的属性，我都无法使卡在中心对齐。我总是留下这样的东西：

GridList偏心的地方。我浏览了material-ui文档，查看了this之类的众多解释，但没有任何效果。请帮忙！

Answer 1

您在顶级容器元素上指定了margin: 0 auto;，但是您没有为该元素赋予任何样式以使此自动边距生效。您需要为该元素提供宽度门，这样自动边距实际上将在任一侧间隔开。

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

我从您定义的卡片大小中得到1040。每边240宽和10的空白意味着20 px的空间（第一张卡片10px在右边，第二张卡片10px在左边）。 260 * 4 = 1040：）