React v17+使用MUI v5+ DataGrid时分页控件重叠于表头顶部问题求助

问题原因 #

MUI v5 的 DataGrid 组件依赖固定的容器高度完成内部布局渲染，你没有给包裹 DataGrid 的外层容器或组件本身设置明确高度，导致内部排版计算异常，分页栏、边框等元素定位错位。

解决方案 #

你可以根据业务场景选择以下任意一种方案修复：

• 给外层容器设置固定高度
  修改外层div的样式，明确指定高度即可：

return (
  <div style={{ height: 600, width: '100%' }}>
    <DataGrid rows={rows} columns={columns} pageSize={paginationSize} />
  </div>
);

• 开启自动高度适配
  如果你的表格行数较少，想要高度随内容自动适配，可以直接给DataGrid添加autoHeight属性：

<DataGrid 
  rows={rows} 
  columns={columns} 
  pageSize={paginationSize} 
  autoHeight
/>

• 父容器为flex布局的场景
  如果DataGrid的父容器是flex布局，需要给父容器添加flex: 1并确保父级的父容器有确定高度，同时给DataGrid添加sx={{ flex: 1 }}属性即可。

修改后重新运行，分页栏会自动回归到表格底部，边框布局也会恢复正常。

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