javascript - 无法将material-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>
    )
}

and finally, container.js (which uses 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 像素的空间(第一张卡在右侧 10 像素，第二张卡在左侧 10 像素)。 260 * 4 = 1040:)