如何替换MUI X Data Grid组件中的排序图标？

下面提供三种可行的解决方案，按需选择即可：

方案1：自定义列头组件（完全控制图标显示） #

通过替换默认的ColumnHeader组件，你可以完全自定义排序图标的样式和逻辑：

import { DataGrid, DataGridProps, GridColDef, GridColumnGroupingModel, GridColumnHeaderProps } from '@mui/x-data-grid';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

export type TableColDef = GridColDef;
export type TableColumnGroupingModel = GridColumnGroupingModel;

const CustomColumnHeader = (props: GridColumnHeaderProps) => {
  const { sortDirection, colDef } = props;
  
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>{colDef.headerName}</span>
      {sortDirection === 'asc' && <ArrowUpwardIcon fontSize="small" />}
      {sortDirection === 'desc' && <ArrowDownwardIcon fontSize="small" />}
    </div>
  );
};

export const Table = (p: DataGridProps) => {
  return (
    <DataGrid
      {...p}
      components={{
        ColumnHeader: CustomColumnHeader
      }}
    />
  );
};

方案2：CSS覆盖（快速替换图标） #

如果只需要简单替换图标样式，不需要修改组件结构，用CSS覆盖默认图标即可：

字符图标替换 #

/* 隐藏默认排序图标 */
.MuiDataGrid-columnHeaderSortIcon {
  display: none;
}

/* 升序状态图标 */
.MuiDataGrid-columnHeader--sortedAsc .MuiDataGrid-columnHeaderTitleContainer:after {
  content: '↑';
  margin-left: 4px;
  font-size: 14px;
}

/* 降序状态图标 */
.MuiDataGrid-columnHeader--sortedDesc .MuiDataGrid-columnHeaderTitleContainer:after {
  content: '↓';
  margin-left: 4px;
  font-size: 14px;
}

自定义图片替换 #

.MuiDataGrid-columnHeaderSortIcon {
  display: none;
}

.MuiDataGrid-columnHeader--sortedAsc .MuiDataGrid-columnHeaderTitleContainer:after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: url('你的升序图标地址');
  background-size: cover;
  display: inline-block;
}

.MuiDataGrid-columnHeader--sortedDesc .MuiDataGrid-columnHeaderTitleContainer:after {
  content: '';
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: url('你的降序图标地址');
  background-size: cover;
  display: inline-block;
}

方案3：通过slotProps替换默认图标组件 #

如果只是想替换默认的Material Icons图标，同时保留原有列头结构，用slotProps最便捷：

import { DataGrid, DataGridProps, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

export type TableColDef = GridColDef;
export type TableColumnGroupingModel = GridColumnGroupingModel;

export const Table = (p: DataGridProps) => {
  return (
    <DataGrid
      {...p}
      slotProps={{
        columnHeader: {
          sortIcon: {
            asc: <ArrowUpwardIcon fontSize="small" />,
            desc: <ArrowDownwardIcon fontSize="small" />
          }
        }
      }}
    />
  );
};

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