如何移除MUI X DataGrid中的MuiDataGrid-filler组件

你遇到的MuiDataGrid-filler是DataGrid用于填充列宽、维持布局对齐的元素，但在部分场景下会引发底部空白问题。直接修改其高度为0后出现垂直滚动条，是因为破坏了组件原有的布局逻辑。试试下面几种更优雅的解决方式：

• 方案一：匹配列头与行的实际高度
  如果自定义过列头或行的高度，可能导致filler的计算出现偏差。确保columnHeaderHeight和rowHeight属性与实际渲染高度一致：

  <DataGrid
    columnHeaderHeight={56} // 对应默认或自定义的列头高度
    rowHeight={52} // 对应默认或自定义的行高度
    // 其他业务属性
  />
  

• 方案二：通过CSS优雅隐藏filler组件
  避免直接修改高度，改用display: none隐藏组件，同时调整主容器的溢出规则防止滚动条出现：

  "& .MuiDataGrid-filler": {
    display: "none",
  },
  "& .MuiDataGrid-main": {
    overflow: "visible",
  }
  

  若担心隐藏filler影响布局稳定性，也可以将其移出可视区域：

  "& .MuiDataGrid-filler": {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  

• 方案三：检查分页与footer配置
  若开启了分页功能但未正确配置，或存在自定义footer组件，可能导致filler异常。不需要分页时直接设置pagination={false}，同时检查是否有额外的footer元素引发布局偏移。

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