MUI X Data Grid表头未显示加粗样式的问题排查求助

核心原因 #

你的自定义样式font-weight: bold未生效，主要是MUI内置的表头文本样式优先级更高——直接给表头容器（super-app-theme--header）设置字体加粗，会被内部文本元素（.MuiDataGrid-columnHeaderTitle）的默认样式覆盖。另外你写的background-color: #red是无效值，需改为red或#ff0000。

解决方案 #

方案1：精准选中表头文本元素（推荐） #

修改全局样式，直接定位到表头内部的文本元素，提升样式优先级：

/* App.css */
.super-app-theme--header .MuiDataGrid-columnHeaderTitle {
  font-weight: bold;
}
.super-app-theme--header {
  background-color: red; /* 修正颜色值 */
}

方案2：使用!important强制覆盖（快速生效，不推荐长期使用） #

若仅临时测试，可通过!important强制覆盖内置样式：

/* App.css */
.super-app-theme--header {
  background-color: red;
  font-weight: bold !important;
}

方案3：用MUI的sx属性（符合MUI最佳实践） #

直接在DataGrid组件上通过sx属性配置表头样式，无需全局CSS：

<DataGrid
  rows={rows}
  columns={columns}
  sx={{
    '& .MuiDataGrid-columnHeaderTitle': {
      fontWeight: 'bold'
    },
    '& .super-app-theme--header': {
      backgroundColor: 'red'
    }
  }}
/>

方案4：全局主题统一配置 #

若需要所有DataGrid表头都默认加粗，可在MUI主题中全局配置：

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

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        columnHeaderTitle: {
          fontWeight: 'bold'
        }
      }
    }
  }
});

// 在根组件包裹ThemeProvider
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <FixedSizeGrid />
    </ThemeProvider>
  );
}

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