如何修改Material React Table表头图标颜色及悬停深色效果？

方法1：通过组件sx属性直接覆盖样式 #

利用Material React Table自带的MRT-HeaderCell-icon类名精准定位表头图标，直接在表格组件内设置样式：

import MaterialReactTable from 'material-react-table';

const MyTable = () => {
  const columns = [
    { accessorKey: 'name', header: '名称' },
    { accessorKey: 'age', header: '年龄' },
  ];

  const data = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 },
  ];

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      sx={{
        '& .MRT-HeaderCell-icon': {
          color: '#ff0000', // 初始红色
          '&:hover': {
            color: '#cc0000', // 悬停时更深的红色
          },
        },
      }}
    />
  );
};
export default MyTable;

方法2：全局配置MUI主题 #

如果需要所有表格的表头图标都应用该样式，可通过自定义MUI主题实现全局覆盖：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import MaterialReactTable from 'material-react-table';

const customTheme = createTheme({
  components: {
    MuiIconButton: {
      styleOverrides: {
        root: {
          '&.MRT-HeaderCell-icon': {
            color: '#ff0000',
            '&:hover': {
              color: '#cc0000',
            },
          },
        },
      },
    },
  },
});

const MyTable = () => {
  const columns = [/* 列定义 */];
  const data = [/* 数据 */];
  
  return (
    <ThemeProvider theme={customTheme}>
      <MaterialReactTable columns={columns} data={data} />
    </ThemeProvider>
  );
};

方法3：针对特定列单独设置 #

仅需给部分列的表头图标改色时，可在列定义中通过headerProps传入样式：

const columns = [
  {
    accessorKey: 'name',
    header: '名称',
    headerProps: {
      sx: {
        '& .MRT-HeaderCell-icon': {
          color: '#ff0000',
          '&:hover': { color: '#cc0000' },
        },
      },
    },
  },
  // 其他列保持默认样式
];

补充说明 #

• MRT-HeaderCell-icon是Material React Table专为表头图标提供的类名，不会干扰页面其他IconButton组件。
• 也可使用MUI内置颜色变量替代十六进制值，比如color: theme => theme.palette.error.main（默认红色），悬停时用theme.palette.error.dark（更深的红色）。

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