Javascript 当物料UI'；上的排序方向为空时，是否有方法添加图标；什么是数据网格头？

材质UI显示了如何在方向为升序时添加排序图标，以及在排序方向为降序时添加另一个排序图标。这些默认设置为向上箭头和向下箭头图标，可以通过道具轻松更改。我的设计要求在排序方向为

null

时也有一个图标（即，用户尚未单击该列标题，但上下箭头指示该列可排序）

我尝试过几种解决方案，但都不满意。我试着在

ColDef

中使用

renderHeader

来实现

SortModel

更改时的图标，但是它看起来不够好，而且

DataGrid

布局在

SortModel

更改时由于某种原因变得混乱

---

当未定义排序方向时，是否有更好的方法简单地在标题标题旁边添加可排序图标？

物料界面

DataGrid

没有将图标设置为无排序状态的选项。要做到这一点，你需要把手弄脏

我尝试在ColDef中使用renderHeader来实现SortModel更改时的图标，但它看起来不够好

为了复制内置的排序图标，您需要知道在排序模式下在列标题中呈现哪些组件。查看

DataGrid

源代码，您可以看到：

• In：如果您不提供

  renderHeader

  ，它将进行渲染。因此，我们需要使用该组件来呈现标题

• 在中：此组件用于渲染排序图标，该图标被包装在一个

  IconButton

  中，该按钮的

  小

  大小被包装在一个容器中。请确保在呈现自己的标题图标时复制该代码

把它放在一起，我们将有如下内容：

从“@material ui/x-grid”导入{GridColumnHeaderTitle}”；

{
字段：“名字”，
头名：“名字”，
宽度：130，
renderHeader:（参数）=>{
const{field，api，colDef}=params；
const sort=api.state.sorting.sortModel.filter(
（s） =>s.field===field
)？[0]？.排序；
常量isSorting=布尔值（排序）；
返回(
{！isSorting&&(
)}
);
}
},

现场演示