如何在 Material ui 上默认显示未排序的图标？

Question

我正在努力理解如何默认显示此图标，但在任何地方都找不到。

我查看文档并尝试按槽显示它，但收到错误“GridColumnUnsortedIcon 未定义”。

文档.

我在Github上发现一个问题已经解决了，但不明白如何实现。

问题

Answer 1

未排序列的默认行为是显示与单击后排序结果相对应的图标。此外，默认情况下，列标题中的图标“大部分时间隐藏”，并且仅在“将鼠标悬停在列标题上时”显示这些图标。 第一步是自定义未排序的图标。在我的示例中，我使用 SortByAlphaIcon。与文档中的

图标自定义示例

一样，我将图标包裹在薄层中（下面的

UnsortedIcon

）以控制哪些道具传递到图标。

import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";

export function UnsortedIcon({ className }) {
  return <SortByAlphaIcon className={className} />;
}
...
<DataGrid
        columns={columns}
        rows={rows}
        slots={{
          columnUnsortedIcon: UnsortedIcon
        }}
      />

如果您希望该图标始终显示（而不仅仅是悬停时），那么您需要覆盖隐藏它的样式。您可以在此工作示例中看到通过

sx

 属性指定的样式覆盖：

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import SortByAlphaIcon from "@mui/icons-material/SortByAlpha";

const rows = [
  {
    id: 1,
    name: "MUI",
    stars: 28000
  },
  {
    id: 2,
    name: "DataGrid",
    stars: 15000
  }
];
function UnsortedIcon({ className }) {
  return <SortByAlphaIcon className={className} />;
}

const columns = [
  { field: "name", width: 150 },
  { field: "stars", width: 150 }
];

export default function CustomSortIcons() {
  return (
    <div style={{ height: 250, width: "100%" }}>
      <DataGrid
        sx={{
          "& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer": {
            visibility: "visible",
            width: "auto"
          },
          "& .MuiDataGrid-columnHeader:not(.MuiDataGrid-columnHeader--sorted) .MuiDataGrid-sortIcon": {
            opacity: 0.5
          }
        }}
        columns={columns}
        rows={rows}
        slots={{
          columnUnsortedIcon: UnsortedIcon
        }}
      />
    </div>
  );
}

遇到同样的问题。

Answer 2

            IconComponent={({sx, ...restProps}: any)=>{
                return <ArrowDownwardIcon {...restProps} sx={{
                    ...sx,
                    opacity:"1 !important"

                }
                }/>
            }}