如何在容器 MUI 中居中网格元素？

Posted 2023-03-07

【中文标题】如何在容器 MUI 中居中网格元素？

【英文标题】：How to center grid elements in a container MUI?

【发布时间】：2021-04-09 05:43:08

【问题描述】：

以下是我正在尝试实现的代码sn-p。

<Container className=Styles.projectSelection>
            <Grid container item spacing=8 alignItems="center">
                <Grid item>
                    <Typography variant="h3" color="primary">
                        Projects
                    </Typography>
                </Grid>
                <Grid item>
                    <Searchbar />
                </Grid>
            </Grid>
            <Grid container item></Grid>
            <Grid container item>
                <Grid item>
                    <Button startIcon=<AddRounded />>Create Project</Button>
                </Grid>
            </Grid>
        </Container>

对于 projectSelection 类

.projectSelection 
    display: flex !important;
    flex-direction: column;
    align-items: center;

如果容器内有另一个组件，例如 h1 标签，projectSelection 类下定义的属性可以正常工作，但为什么它们会因网格而失败？

【参考方案1】：

<Grid container item spacing=8 justify="center">
    <Grid item></Grid>
    <Grid item></Grid>
</Grid>