Material-UI中Grid内Paper组件未拉伸无法实现等高布局如何解决

问题原因 #

你给Grid容器设置的alignItems="stretch"仅会作用于直接子元素也就是Grid项，让所有Grid项自动拉伸到等高状态，但嵌套在Grid项内部的Paper组件默认高度为内容自适应，不会主动填充父级Grid项的剩余高度，因此无法实现等高效果。

解决方案 #

只需要给Paper组件添加height: 100%的样式即可，有两种常用实现方式：

• 如果你使用makeStyles/styled自定义样式类，直接在paperClass对应的样式规则中增加高度配置：

// 样式定义部分修改
const useStyles = makeStyles(() => ({
  paperClass: {
    // 保留你原本的样式配置
    height: '100%', // 新增这一行即可
  }
}))

• 如果你不想修改原有样式类，也可以直接通过MUI的sx属性临时配置：

// 所有Paper组件修改为如下写法
<Paper className={classes.paperClass} elevation={3} sx={{ height: '100%' }}>
  {/* 原有内部内容不变 */}
</Paper>

修改完成后所有Paper都会自动填满父级Grid项的高度，实现等高布局。

内容的提问来源于stack exchange，提问作者Areeba Akhtar