首页 > 解决方案 > 如何更改 React Material-Table 上表头列的默认排序图标?

问题描述

我可以更改 React Material-Table 表标题列上的默认排序图标吗?前任。我想将 asc 排序图标更改为 ArrowDownward 并将 desc 排序图标更改为 ArrowUpward。我尝试在 MaterialTable 上设置 SortArrow 图标道具,但它显示在每个表标题列上,即使它不是活动的排序列。请帮忙。

材料表

代码:

<MaterialTable ... icons={{ SortArrow: () => <ArrowDownwardIcon /> }}

标签: reactjsmaterial-uimaterial-table

解决方案


您必须像这样转发裁判:

import React, { forwardRef } from 'react';  
...
<MaterialTable>  
     icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownwardIcon{...props} ref={ref}/>)}}
<MaterialTable> 

这会将所需的道具传递给您的自定义图标,并且它将起作用。


推荐阅读