Reactjs 如何删除材质UI网格行之间不必要的空间？

我试图使用材质ui网格系统，但在使用网格方向='row'时出现了一个尴尬的空间

minHeight：“100vh”是问题所在，因为这个网格组件是容器，并且具有显示灵活性，网格项组件的列宽为12…所以第一个网格组件将占据整个宽度，因此第二个网格组件将在下一行中渲染，但容器是柔性的，所以容器的高度将一分为二，新的网格项将从此处渲染。。。造成这种向上间隔

---

此问题与

非常相似。您是否使用浏览器的“检查”工具查看网格元素后为什么有这么多空间；但是什么也没出现你们男人怎么知道什么也没出现？什么CSS应用于网格元素？这将是一个很好的信息。或者，如果你能提供一个代码沙盒或类似的东西供其他人检查，那就太好了。我已经添加了浏览器工具检查，你可以看到盒子模型中没有显示任何东西，比如组件之间是否有填充或空白。是的，但是这些网格元素上定义了什么CSS？什么是最高利润率：1vh；？

const useStyles = makeStyles((theme) => ({
    gridHome: {
        minHeight: '100vh',
        border: '2px solid red'
    },
    gridContent: {
        width: '100%',
        border: '2px solid black',
        textAlign: 'center'
    },
    title: {
        fontFamily: 'Dancing Script,Sans Serif,cursive',
    }
 }));

const NewUser = () => {
    const classes = useStyles();
    return (
        <React.Fragment>
            <Grid container direction='row' justify='center' alignItems='flex-start' className= 
            {classes.gridHome}>
                <Grid item xs={12} md={12} className={classes.gridContent}>
                    <Typography className={classes.title}>user</Typography>
                </Grid>
                <Grid item xs={12} md={12} className={classes.gridContent}>
                    <Typography className={classes.title}>Welcome User</Typography>
                </Grid>
            </Grid>
       </React.Fragment>
    );
}