Material-UI中Grid嵌套Typography时出现高度异常多余间隙问题

问题根因 #

该多余空白由Material UI的两个默认特性叠加产生：

1. Typography组件的内置样式会为不同variant预设上下外边距，代码中用到的h1、body1都自带默认margin，会额外撑大父级Grid item的占用空间
2. 嵌套Grid布局时，内层Grid container的默认高度计算逻辑和外层column方向Grid的spacing布局规则冲突，内层容器没有适配内容高度，产生了多余的垂直占位

可选用解决方案 #

按需选择以下任意一种即可修复：

• 给所有用到的Typography组件添加disableMargin属性，取消默认的上下外边距：

<Typography variant="h1" disableMargin>Test</Typography>
<Typography variant="body1" disableMargin>Testing Column 1</Typography>

• 给内层嵌套的Grid container添加高度适配样式，强制它仅占用内容所需的高度，v5版本可直接用sx属性，v4版本可把样式写进style属性中：

<Grid container alignItems="center" style={{ border: '1px solid red' }} sx={{ height: 'fit-content' }}>

• 如果不需要内层Grid的默认左右内边距，可同时给内层Grid添加disableGutters属性，进一步消除多余间距：

<Grid container alignItems="center" disableGutters style={{ border: '1px solid red' }}>

问题复现表现 #

内容的提问来源于stack exchange，提问作者Nhat Nguyen