材质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组件将占据整个宽度，因此第二个将是在下一行中呈现，但是container是flex的，因此容器的高度将被分成两半，新的Grid Item将从此处呈现...导致此尴尬的间距。

此问题与Material UI Grid List Rows with a big awkward gap

非常相似