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

问题描述

我有几个Fontawesome标签,分布在多个组件中。它们的颜色属性当前正被硬编码为自定义颜色十六进制代码。我想将此颜色代码集中在CSS中,以便在需要时将其更改为一个位置。这可能吗?

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

解决方法

是的,您可以使用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演示

Edit muddy-lake-osyi8