Material-UI DataGrid未显示全部行 渲染行数随窗口高度变化问题求解

问题根因 #

• 你使用的DataGrid v4.0.0-alpha.23属于早期测试版本，本身内置的高度计算、分页渲染逻辑存在大量已知缺陷，是问题的核心诱因
• 自定义样式中强制覆盖了.MuiDataGrid-row、.MuiDataGrid-cell的maxHeight为none，破坏了DataGrid内置的行高计算逻辑，导致组件无法正确统计每行高度、计算当前可视区域可容纳的行数
• DataGrid默认会自适应父容器高度，当父容器高度大于表头高度+pageSize*行高+分页栏高度时，就会出现底部空白，小于时就会裁剪内容

修复步骤 #

1. 优先升级DataGrid到稳定版本，至少升级到v4.x正式版，优先推荐v5.x/v6.x稳定版，避免测试版本的已知bug
2. 删除自定义样式中3条强制覆盖maxHeight的规则，这是导致行高计算异常的直接原因：

/* 移除以下3行规则 */
'& .MuiDataGrid-row': { maxHeight: "none !important", },
'& .MuiDataGrid-cell.MuiDataGrid-cellWithRenderer.MuiDataGrid-cellLeft': { maxHeight: "none !important" },
'& .MuiDataGrid-cell.MuiDataGrid-cellLeft': { maxHeight: 'none !important', display: 'flex', alignItems: 'center' }

3. 如果需要自定义行高/单元格对齐，改用DataGrid官方提供的props配置，不要强制覆盖内置样式：
   • 给DataGrid添加rowHeight参数指定统一行高，比如rowHeight={52}
   • 单元格对齐可以通过column配置项的align属性设置，不需要自定义样式强制修改
4. 如果你不需要DataGrid自适应父容器高度，想要完全按pageSize渲染对应行数、高度自动适配内容，给DataGrid添加autoHeight属性即可：

<Box className={classes.grid}>
  <DataGrid
    rows={rows}
    columns={columns}
    pageSize={5}
    rowsPerPageOptions={[5, 10, 15]}
    headerHeight={42}
    rowHeight={52}
    autoHeight
  />
</Box>

5. 如果需要保留父容器70vh的高度限制，去掉autoHeight，给Box添加overflow: hidden即可保证DataGrid在父容器内正确渲染、超出高度时自动出现滚动条。

验证效果 #

修改完成后测试：

• pageSize为5时正好显示5行，底部无多余空白
• pageSize为10时如果总高度小于70vh完整显示，大于70vh时自动出现纵向滚动条可以查看所有行
• 调整窗口高度时滚动条状态自动适配，不会出现内容裁剪

内容的提问来源于stack exchange，提问作者Fabio Nardelli