MUI X v5 DataGrid如何修改表头背景色，替代v4 makeStyles的方案是什么

MUI v5 已全面弃用@mui/styles包的makeStyles方案，推荐使用sx属性或styled组件实现样式自定义，修改整行表头背景色的实现方式如下：

推荐方案：使用sx属性实现（轻量无额外依赖） #

核心修改点： #

1. 替换原原生div为Box组件以支持sx属性
2. 直接在DataGrid的sx属性中声明所有样式：
   • 整行表头背景色通过.MuiDataGrid-columnHeaders类匹配修改
   • 原cold/hot单元格样式直接嵌套定义
3. 完全移除makeStyles相关代码

修改后完整代码： #

import * as React from 'react';
import { DataGrid, frFR } from '@mui/x-data-grid';
import { Box } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const rows = [
  {
    id: 1,
    col1: '12345 SEIGNEURS, BOULEVARD DES',
    col2: 'TERREBONNE',
    col3: '1',
    col4: '2',
    col5: '3',
    col6: '4',
  },
  {
    id: 2,
    col1: '12345 SEIGNEURS, BOULEVARD DES',
    col2: 'TERREBONNE',
    col3: '5',
    col4: '6',
    col5: '7',
    col6: '8',
  },
  {
    id: 3,
    col1: '12345 SEIGNEURS, BOULEVARD DES',
    col2: 'TERREBONNE',
    col3: '9',
    col4: '10',
    col5: '11',
    col6: '12',
  },
];

const columns = [
  {
    field: 'col1',
    headerName: 'Adresse',
    sortable: false,
    width: 375,
  },
  { field: 'col2', headerName: 'Secteur', sortable: false, width: 235 },
  { field: 'col3', flex: 1, headerName: 'Nombre de logement', sortable: false },
  { field: 'col4', flex: 0.5, headerName: 'Déchets', sortable: false },
  { field: 'col5', flex: 0.5, headerName: 'Recyclage', sortable: false },
  { field: 'col6', flex: 0.5, headerName: 'Organique', sortable: false },
];

const theme = createTheme();

export default function DataTable() {
  const handleClick = (params, event) => {};

  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ height: 300, width: '100%' }}>
        <DataGrid
          autoHeight
          sx={{
            borderLeft: 0,
            borderRight: 0,
            borderBottom: 0,
            // 整行表头背景色修改
            '& .MuiDataGrid-columnHeaders': {
              backgroundColor: '#f5f5f5', // 替换为你需要的表头背景色
              color: '#333',
            },
            // 原有单元格样式
            '& .cold': {
              backgroundColor: '#b9d5ff91',
              color: '#1a3e72',
            },
            '& .hot': {
              backgroundColor: '#ff943975',
              color: '#1a3e72',
            },
          }}
          getCellClassName={(params) => {
            if (
              params.field === 'col3' ||
              params.field === 'col4' ||
              params.field === 'col5' ||
              params.field === 'col6'
            ) {
              return params.value >= 3 ? 'hot' : 'cold';
            }
            return '';
          }}
          columns={columns}
          disableColumnMenu
          localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
          rows={rows}
          onRowClick={(params, event) => handleClick(params, event)}
        />
      </Box>
    </ThemeProvider>
  );
}

可选方案：全局主题配置 #

如果需要项目内所有DataGrid的表头都使用统一样式，可以直接在createTheme中配置全局默认样式：

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        columnHeaders: {
          backgroundColor: '#f5f5f5',
          color: '#333',
        },
        root: {
          borderLeft: 0,
          borderRight: 0,
          borderBottom: 0,
        }
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Jean-François Handfield