MUI DataGrid筛选界面滚动时出现变形问题求助

问题描述 #

使用MUI DataGrid时，拖动表格滚动条后，表格内的筛选界面出现变形。尝试通过修改mui datagrid-root样式修复，但未生效。

变形前后对比：

• 正常状态：
• 变形状态：

当前使用的DataGridPremium代码：

<DataGridPremium 
      initialState={{
        columns: {
          columnVisibilityModel: {
            actions: false,
          },
        },
      }}
  rows={productList}
  columns={columns}
  pageSize={10}
  autoHeight
  disableRowSelectionOnClick="true"
  localeText={customizeDataGrid()}
  slots={{
    toolbar: () => (
      <GridToolbar
      showQuickFilter
        csvOptions={{
          fileName: 'Ürün Listesi',
          delimiter: ';',
          utf8WithBom:true,
        }}
        printOptions={{
          disableToolbarButton: true,
        }}
        excelOptions={{
          fileName: "Ürün listesi",
          includeHeaders: true,
        }}
      />
    )
  }}
  
/>

解决方案尝试 #

针对滚动导致筛选弹窗错位/变形的问题，可尝试以下几种方案：

1. 调整筛选弹窗定位方式 #

添加自定义CSS覆盖默认样式，让筛选弹窗相对于表头单元格定位，避免滚动时错位：

.MuiDataGrid-filterForm {
  position: absolute !important;
}

2. 移除autoHeight属性 #

autoHeight可能导致表格容器高度计算异常，引发弹窗位置错误。尝试设置固定高度替代：

<DataGridPremium 
  // 移除autoHeight
  height={600} // 根据需求设置合适高度
  // 其他属性保持不变
/>

3. 升级MUI DataGrid版本 #

该问题可能是组件已知bug，已在新版本修复。升级到最新稳定版：

npm update @mui/x-data-grid-premium

4. 自定义筛选组件 #

如果默认弹窗逻辑存在问题，可替换为自定义筛选组件，完全控制布局：

const CustomFilter = ({ column }) => {
  return (
    <div style={{ padding: '8px' }}>
      <input 
        placeholder={`筛选${column.headerName}`} 
        style={{ width: '100%', padding: '4px' }}
      />
    </div>
  );
};

// 在列配置中应用
const columns = [
  {
    field: 'name',
    headerName: '产品名称',
    filterable: true,
    filterComponent: CustomFilter,
  },
  // 其他列配置
];

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