时间戳

首页 > 解决方案 > 如何删除 Material-UI 的网格行之间的不必要空间？

reactjs - 如何删除 Material-UI 的网格行之间的不必要空间？

问题描述

在此处输入图像描述我试图使用材质 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>
    );
}

标签： reactjsgridmaterial-ui

解决方案

minHeight: '100vh'是问题所在，因为这个 Grid 组件是容器并且具有显示 flex 并且“Grid item”组件的列宽为 12...所以第一个网格组件将占据整个宽度，因此第二个将在下一行呈现，但容器是 flex所以容器的高度将被分成两半，新的 Grid Item 将从那里渲染......导致这个 akward 间距。

这个问题与 Material UI Grid List Rows 非常相似，有很大的尴尬差距

推荐阅读