CSS中的Fortawesome reactjs图标颜色

【问题标题】：Fortawesome reactjs icon colors in cssCSS中的Fortawesome reactjs图标颜色
【发布时间】：2020-12-14 18:45:36
【问题描述】：

我有几个 Fontawesome 标签分布在几个组件中。他们的颜色属性目前被硬编码为自定义颜色 HEX 代码。我想将这个颜色代码集中在 css 中，这样如果需要我只需将其更改为一个地方。这可能吗？

<FontAwesomeIcon icon={faThumbsUp} 
                        size="sm" color="#7ACC35"/>

【问题讨论】：

您可以为此创建中心类。将来，如果您想更新任何特定样式，它将从那里更新。您不必担心其他任何地方。

标签： css reactjs colors font-awesome centralized

【解决方案1】：

是的，您可以这样做，只需使用 className 并在 css 文件中定义您的

.CustomColor {
  color: red;
}

.CustomColor2 {
  color: green;
}

.CustomColor3 {
  color: blue;
}

<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />

Codesandbox 演示

【讨论】：