Reactjs 如何仅使用材质ui将表单居中？

我试图学习MaterialUI，并尝试创建一个“表单”，查看他们的文档（我在理解文档的节奏时遇到了一些困难，不知道我是否实际使用了用于创建表单的预期标记：p）。不管怎样，我想把我的“表单”居中，在摆弄了材料UI文档中的代码和我对css的了解之后，我设法把“表单”居中，只是水平居中，而似乎无法垂直居中。我还不知道如何使用我自己的css代码以及material ui中提供的功能，事实上我希望这是一个纯粹的material ui，因为当我开始使用material ui和css的混合样式开发大型应用程序时，我觉得将css与material ui一起使用会使一切变得更加复杂。是否有任何方法仅使用纯材质ui代码将表单居中

以下是我的组件代码：

import React, {Component} from 'react'
import {Button, TextField, FormControl, Container, Paper, Box, Grid} from '@material-ui/core'

class Login extends Component {
    render () {
        return (
            <Grid container direction="row" alignItems="center" justify="center">
                <Paper>
                    <form>
                        <Box> 
                            <TextField id="outlined-basic" variant="outlined" label="Username"/>
                        </Box>
                        <Box>
                            <TextField id="outlined-basic" variant="outlined" label="Password"/>
                        </Box>
                        <Box>
                            <Button variant="contained" color="primary">Login</Button>
                            <a href="Register.js">Register</a>
                        </Box>
                    </form>
                </Paper>
            </Grid>   
        )
    }
}

export default Login

import React，{Component}来自“React”
从“@material ui/core”导入{Button，TextField，FormControl，Container，Paper，Box，Grid}
类登录扩展组件{
渲染（）{
返回(
登录
)
}
}
导出默认登录名

您应该摆脱那种不应该使用自定义css自定义组件的想法，因为大多数react UI框架/lib都是为它实现覆盖功能的

由于MUI使用flexbox，只需几秒钟即可将内容集中到容器中

/*LoginComponent.css*/
/*由于Material UI使用现代flexbox实现，因此我们可以使用justify content和align items*/
.centerMyForm{
证明内容：中心；
对齐项目：居中；
}

//LoginComponent.js
从“React”导入React，{Component}
从“@material ui/core”导入{Button，TextField，FormControl，Container，Paper，Box，Grid}
import'./LoginComponent.css'//我们导入您的自定义css。
类登录扩展组件{
渲染（）{
返回(
{/*我们在这里添加您的自定义类名，以使表单居中*/}
登录
)
}
}
导出默认登录名

您必须指定容器的高度。