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

【问题标题】：How to change sort icon in detailslist如何更改详细信息列表中的排序图标
【发布时间】：2022-06-23 22:02:48
【问题描述】：

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

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

【问题讨论】：

【解决方案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 提示。

【讨论】：

哦。看来你是对的。默认情况下这是不可能的。可惜了

【解决方案2】：

你可以通过一些 css 技巧来实现你想要的。在我的用例中，我只需要更改颜色。在下面的示例中，我添加了一个背景图像来设置您自己的图标。

<DetailsList onRenderDetailsHeader={(headerProps, defaultRender) => {
                                    return defaultRender({
                                        ...headerProps,
                                        styles: {
                                            root: {
                                                selectors: {
                                                    '.ms-DetailsHeader-cell': {
                                                        backgroundColor: '#0f238c',
                                                        color: 'white' 
                                                    },
                                                    '.sortIcon-283': {
                                                        color: '#0f238c',
                                                        backgroundColor: '#0f238c',
                                                        backgroundImage: decendingFilter ? 'url([PATHTOIMG1])' : 'url([PATHTOIMG2])',
                                                        backgroundRepeat: 'no-repeat',
                                                        backgroundSize: 'contain',
                                                    },
                                                },
                                            }
                                        }
                                    });
                                }}
                            />

【讨论】：