Material ui 材质ui网格对齐，不垂直居中

我想问你一个关于材质ui对齐的问题。 我在material ui中遵循了这个示例。
!

但是由于应用了这个例子，我并没有垂直地处理它。 如果您能给我一个解决方案，我将不胜感激。
这是我的代码和结果

我想看到一个黑色的结果

类NavComponent扩展了React.Component{
render（）{
常量导航边界={
边框：“1px纯黑”，
高度：“100px”
}
常数tempStyle={
边缘左侧：“50px”，
}
常数temp2Style={
marginRight:“55px”，
背景：“紫色”，
颜色：“白色”
}
返回(
登录
开始
)
}
}
导出默认导航组件

您能解释一下网格文档页面中的哪个示例吗？并提供一个代码沙盒将不胜感激。您能解释一下网格文档页面中的哪个示例吗？如果提供一个代码沙盒，我们将不胜感激。

class NavComponent extends React.Component {

    render() {
        const navborder = {
            border: "1px solid black",
            height: "100px"
        }
        const tempStyle = {
            marginLeft: "50px",
        }
        const temp2Style = {
            marginRight: "55px",
            background: "purple",
            color: "white"
        }
        return (
            <div style={navborder}>
                <Grid container>
                    <Grid item xs={6}>
                        <Grid container
                            direction="row"
                            justify="flex-start"
                            alignItems="center"
                        >
                            <img style={tempStyle} src="slacklogo.png" alt="logo" />
                        </Grid>
                    </Grid>
                    <Grid item xs={6} >
                        <Grid container
                            direction="row"
                            justify="flex-end"
                            alignItems="center"
                        >
                            <div>
                                Sign in
                            </div>
                            <Button style={temp2Style} color="secondary" >
                                Get Start
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}
export default NavComponent