Material React Table V3中无法修改默认移动图标大小问题

你遇到的问题是因为Material React Table（MRT）V3的默认拖拽手柄组件对内部图标有优先级更高的样式封装，直接替换图标并设置sx属性会被覆盖。可以试试以下几种方案：

方案1：提高样式优先级（快速临时解决） #

在fontSize后添加!important强制覆盖默认样式：

children: <DragIndicatorIcon sx={{ fontSize: "18px !important" }} />

方案2：使用MRT官方提供的headerDragHandleProps（推荐） #

在列定义中通过headerDragHandleProps直接给拖拽手柄容器设置样式，穿透到内部图标：

const columns = [
  {
    accessorKey: 'yourColumnKey',
    header: '你的列标题',
    headerDragHandleProps: {
      sx: {
        '& svg': {
          fontSize: '18px',
          // 还可以添加其他样式，比如color: 'red'
        },
      },
    },
  },
  // 其他列配置...
];

方案3：全局主题覆盖（适合全项目统一修改） #

通过MUI的主题配置全局修改拖拽图标样式，这样所有MRT表格的移动图标都会生效：

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

const customTheme = createTheme({
  components: {
    MRT_TableHeaderDragHandle: {
      styleOverrides: {
        root: {
          '& svg': {
            fontSize: '18px',
          },
        },
      },
    },
  },
});

// 在组件中使用主题包裹
export default function YourTable() {
  return (
    <ThemeProvider theme={customTheme}>
      <MaterialReactTable columns={columns} data={yourData} />
    </ThemeProvider>
  );
}

方案2是最符合MRT设计规范的方式，通过官方暴露的props传递样式，能有效避免样式冲突问题。

内容的提问来源于stack exchange，提问作者E.DhivyaJL