Material UI DataGrid分页异常：仅显示11行问题求助

核心问题排查 #

当pageSize大于10时，DataGrid无法在75vh高度内显示对应行数，仅展示11行后出现空白，结合代码分析主要有两个潜在原因：

• 无效CSS选择器干扰布局：当tableData未加载完成时，INCIDENT_BREAK_POINT会计算为负数，进而生成[data-rowindex='-16']这类无效CSS选择器，导致DataGrid布局计算异常。
• 行高度计算不一致：未显式固定行高时，部分宽列（如pgn1等350px宽度的列）内容可能自动换行，导致行高不均，组件无法准确计算固定高度内可容纳的行数。

修复方案 #

1. 修复动态行样式的条件渲染

修改sx中的行样式逻辑，仅当断点值有效时才应用背景色样式，避免生成无效选择器：

sx={{
  "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
    outline: "none !important",
  },
  "& .MuiDataGrid-columnHeader": {
    backgroundColor: theme.palette.primary.main,
    color: "white",
  },
  // 仅当断点有效时添加行背景样式
  ...(INCIDENT_BREAK_POINT >= 0 ? {
    [`& .MuiDataGrid-row[data-rowindex='${INCIDENT_BREAK_POINT - 1}']`]: {
      backgroundColor: theme.palette.secondary.light,
    }
  } : {}),
  border: "1px solid black",
  borderRadius: 2,
  height: "75vh",
  ml: 1,
}}

2. 显式固定行高

在DataGrid组件中添加rowHeight属性，确保所有行高度一致，让组件能准确计算可显示行数：

<DataGrid
  // 其他属性保持不变
  rowHeight={52} // 默认行高为52，可根据需求调整
  ...
/>

3. 延迟渲染DataGrid（可选）

确保在columns和tableData都加载完成后再渲染组件，避免初始空状态导致的布局错误：

return (
  <div>
    {/* 面包屑与导出按钮区域保持不变 */}
    {columns.length > 0 && tableData.length > 0 ? (
      <DataGrid
        // 所有原有属性保持不变
      />
    ) : (
      <div style={{ padding: "20px", textAlign: "center" }}>加载中...</div>
    )}
  </div>
);

验证步骤 #

1. 应用修复后，测试不同pageSize（15、20、100），确认DataGrid能在75vh高度内显示对应行数。
2. 若pgn类宽列仍存在内容换行问题，可调整rowHeight值或优化列宽度。

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