column resize icon变为橙色的原因是什么？如何使其保持默认黑色？

解决方法 #

你可以通过以下方案强制固定图标为默认黑色：

• 给图标元素添加最高优先级的CSS样式覆盖，字体图标和SVG图标通用：

/* 将选择器替换为你实际使用的列调整图标的对应选择器 */
.column-resize-icon {
  /* 适配字体图标 */
  color: #000 !important;
  /* 适配SVG图标 */
  fill: #000 !important;
  /* 排除滤镜、背景叠加导致的色偏 */
  filter: none !important;
  background: transparent !important;
}

• 如果偶发变色的场景出现在鼠标悬浮、点击等交互时，排查图标父级元素的:hover、:active、:focus等伪类是否有修改颜色的规则，给对应伪类下的图标也加上上述的黑色固定规则即可。
• 如果你使用的是第三方组件库自带的列调整图标，优先查找组件库的图标颜色配置项，直接指定为黑色，避免组件库内部样式覆盖你写的自定义规则。

内容的提问来源于stack exchange，提问作者Cynthia Sidlauskas