css 中令人敬畏的 reactjs 图标颜色

Question

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

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

Answer 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 演示

css 中令人敬畏的 reactjs 图标颜色

Fortawesome reactjs icon colors in css

css

colors

centralized

font-awesome

reactjs