如何解决MUI Material DataGrid表头背景无法铺满的问题？

核心原因说明 #

你用的cellClassName是针对数据行单元格的配置，表头单元格需要用专门的headerClassName属性，这是DataGrid的属性区分点，容易被忽略。

具体解决方法 #

方法一：直接配置表头类名 #

可以全局给所有表头单元格设置样式，也可以单独给某列表头设置：

// 全局表头样式
<DataGrid
  columns={columns}
  rows={rows}
  headerClassName="full-bg-header"
/>

// 单个列的表头样式
const columns = [
  { field: 'id', headerName: 'ID', headerClassName: 'full-bg-header' },
  { field: 'name', headerName: '名称', headerClassName: 'full-bg-header' },
];

对应的CSS样式（清除默认内边距让背景铺满）：

.full-bg-header {
  background-color: #你的目标背景色;
  padding: 0 !important;
  /* 若需要去掉默认边框，可加border: none; */
}

方法二：用sx内联样式直接覆盖 #

不需要额外写CSS文件，直接在DataGrid组件内用sx属性覆盖默认样式：

<DataGrid
  columns={columns}
  rows={rows}
  sx={{
    '& .MuiDataGrid-columnHeader': {
      backgroundColor: '#你的目标背景色',
      padding: 0,
      // 自定义表头内容的内边距，替代默认单元格padding
      '& .MuiDataGrid-columnHeaderTitle': {
        padding: '12px 16px',
      }
    }
  }}
/>

方法三：全局重写主题样式 #

如果项目中所有DataGrid都需要统一表头样式，可以在MUI主题里配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        columnHeader: {
          backgroundColor: '#你的目标背景色',
          padding: 0,
          '& .MuiDataGrid-columnHeaderTitle': {
            padding: '12px 16px',
          }
        }
      }
    }
  }
});

// 用主题包裹你的组件
<ThemeProvider theme={customTheme}>
  <DataGrid columns={columns} rows={rows} />
</ThemeProvider>

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