如何修改trix富文本编辑器工具栏按钮图标的字体颜色

解决方案 #

Trix 编辑器的工具栏按钮图标采用内嵌 SVG 实现，并非字体图标，因此你之前设置的 color 属性无法作用到图标上，需要单独修改 SVG 元素的 fill 属性才能修改图标颜色。

你可以将原有样式调整为如下内容即可生效：

trix-toolbar
  .trix-button
    background-color: $purple-dark-2
    color: $white
    // 新增SVG填充色设置，修改图标颜色
    svg
      fill: $white
    // 可选：自定义按钮激活状态的图标颜色
    &.trix-active
      svg
        fill: $purple-light // 替换为你需要的激活态颜色
    // 可选：自定义按钮禁用状态的图标颜色
    &:disabled
      svg
        fill: $gray-light // 替换为你需要的禁用态颜色
        opacity: 0.6

如果你的样式写在Vue的scoped样式块内，需要添加深度选择器才能生效：

::v-deep trix-toolbar
  .trix-button
    background-color: $purple-dark-2
    color: $white
    svg
      fill: $white

如果遇到样式优先级不够被覆盖的情况，可适当提升选择器权重，或在属性值后加 !important 强制生效。

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