如何在Material UI中默认显示未排序图标？

解决GridColumnUnsortedIcon is not defined错误 #

这个错误的核心是未正确导入专属图标组件，GridColumnUnsortedIcon是MUI X Data Grid的内置组件，需从对应路径导入：

// 主流版本导入方式
import GridColumnUnsortedIcon from '@mui/x-data-grid/components/GridColumnUnsortedIcon';

// 部分旧版本可直接从主包导入
// import { GridColumnUnsortedIcon } from '@mui/x-data-grid';

实现默认显示未排序图标 #

利用Data Grid的columnHeaderSortIcon插槽，自定义排序图标的显示逻辑，当列处于未排序状态时渲染未排序图标：

import { DataGrid } from '@mui/x-data-grid';
import GridColumnUnsortedIcon from '@mui/x-data-grid/components/GridColumnUnsortedIcon';
import GridColumnSortedAscendingIcon from '@mui/x-data-grid/components/GridColumnSortedAscendingIcon';
import GridColumnSortedDescendingIcon from '@mui/x-data-grid/components/GridColumnSortedDescendingIcon';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '姓名', width: 130 },
  { field: 'age', headerName: '年龄', width: 90 },
];

const rows = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
];

function DataGridUnsortedIconDemo() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        slots={{
          columnHeaderSortIcon: ({ sortDirection }) => {
            switch (sortDirection) {
              case 'asc':
                return <GridColumnSortedAscendingIcon />;
              case 'desc':
                return <GridColumnSortedDescendingIcon />;
              default:
                // 未排序时默认显示未排序图标
                return <GridColumnUnsortedIcon />;
            }
          },
        }}
      />
    </div>
  );
}

export default DataGridUnsortedIconDemo;

版本说明 #

确保你的MUI X Data Grid版本包含相关PR的修复，即版本不低于PR合并后的对应版本，如果是旧版本，建议升级到支持GridColumnUnsortedIcon的版本，避免兼容性问题。

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