javascript - 无法将 Material UI GridList居中

我有一个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之类的众多解释，但是没有任何效果。请帮忙！

最佳答案

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

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

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

关于javascript - 无法将 Material UI GridList居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57582651/