React-wysiwyg工具栏图标悬停/选中状态颜色修改问题

一、悬停时设置指定颜色 #

因为图标是base64位图，color属性无法生效，单一invert只能调整明暗，你可以组合多个CSS滤镜来将图标转为指定颜色。比如要设置为红色，可用以下滤镜组合：

filter: "invert(1) sepia(1) saturate(5) hue-rotate(310deg)"

各滤镜作用：

• invert(1)：反转图标原有颜色（把深色转浅色，方便后续调色）
• sepia(1)：给图标添加棕色调基础
• saturate(5)：提高颜色饱和度，让目标色更鲜艳
• hue-rotate(310deg)：调整色相到红色区间（不同目标色对应不同角度，比如蓝色是240deg）

二、激活状态（选中时）设置指定颜色 #

React-wysiwyg的激活按钮会自动添加active类名，你可以针对这个类编写样式，同样用滤镜组合实现指定颜色。

修改后的完整样式代码 #

const useStyles = makeStyles((theme) => {
  return {
    icons: {
      "& img:hover": {
        // 悬停时设为红色
        filter: "invert(1) sepia(1) saturate(5) hue-rotate(310deg)",
      },
      // 针对激活状态的样式
      "&.active img": {
        // 激活时设为蓝色
        filter: "invert(1) sepia(1) saturate(5) hue-rotate(240deg)",
      },
    },
  };
});

额外提示 #

如果想要更精准的颜色控制，也可以替换默认的base64图标为自定义SVG图标，SVG支持直接通过fill或color属性修改颜色，写法更直观。比如：

bold: {
  icon: <svg viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>,
  className: classes.icons,
}

此时就可以直接用color属性修改悬停/激活色：

& img:hover, &.active img {
  color: red;
}

内容的提问来源于stack exchange，提问作者Muthuramakrishnan Mahadevan