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

【问题标题】：How to remove unnecessary space between Grid Rows of Material-UI?如何删除 Material-UI 的网格行之间的不必要空间？
【发布时间】：2020-04-06 06:40:57
【问题描述】：

我正在尝试使用材质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>
    );
}

【问题讨论】：

你有没有用浏览器的检查工具看看为什么Grid元素后面有这么多空间？
yes i;ve 但没有显示任何内容
你们什么都没有出现？ Grid 元素应用了什么 CSS？这将是很好的信息。或者，如果您可以提供 Minimal. Complete, and Reproducible 代码框或类似代码供其他人检查，那就太好了。
我添加了浏览器工具检查，您可以看到在盒子模型中没有显示任何内容，例如组件之间是否有填充或边距。
是的，但是在这些网格元素上定义了什么 CSS？ margin-top: 1vh; 得到了什么？

标签： reactjs grid material-ui

【解决方案1】：

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

这个问题和Material UI Grid List Rows with a big awkward gap很像

【讨论】：