如何更改详细信息列表中的排序图标

Question

我正在使用详细信息列表，是否有快速属性更改排序图标的方法？

我在下面找到styles但不知道如何设置

Answer 1

这是不可能的，因为sort icon是直接在DetailsColumn.base.tsx内部实现的：

{column.isSorted && (
 <IconComponent
   className={classNames.sortIcon}
   iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'}
 />
)}

但如果您确实需要该功能，您可以重新组合 DetailsList Component。提示：

<DetailsList
  onRenderDetailsHeader={(headerProps, defaultRender) => {
     return headerProps && defaultRender ? (
       {defaultRender({
         ...headerProps,
         onRenderColumnHeaderTooltip: props => {
           return <TooltipHost {...props} children={/* Implementation here! */} />
         }
       })}
     ) : null;
  }}
/>

保持不变children functionality并重写图标渲染。

Codepen example 提示。

如何更改详细信息列表中的排序图标

How to change sort icon in detailslist

fluentui-react