笨拙的材料网格行之间的空间UI

Question

我试图使用材料ui网格系统，但当我使用网格时，出现了一个尴尬的空间。direction='row'.

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>
    );
}

Answer 1

minHeight: '100vh' 问题是，因为这个Grid组件是容器，具有显示弹性，而 "Grid item "组件的列宽为12...所以第一个Grid组件将占据整个宽度，因此第二个将在下一行呈现，但容器是弹性的，所以容器的高度将被分成两半，新的Grid item将从那里呈现...导致这个尴尬的间距。

这个问题非常类似于 材质UI网格列表行数有很大的尴尬差距。