React中FontAwesomeIcon图标颜色无法修改问题求助

直接使用组件自带的color属性 #

FontAwesome的React组件本身内置了color属性，这是最直接的修改方式，无需额外编写CSS：

<FontAwesomeIcon icon={faMagnifyingGlass} color="red" />

调整CSS Modules的样式优先级 #

如果坚持用CSS类控制颜色，大概率是全局样式优先级高于模块样式，可通过以下方式修复：

/* 方式1：通过父级选择器提升优先级 */
.searchButton .searchIcon {
    color: red;
    font-size: 15px;
}

/* 方式2：仅在全局样式强制覆盖时使用（不推荐常规场景） */
.searchIcon {
    color: red !important;
    font-size: 15px;
}

利用currentColor继承父元素颜色 #

SVG的fill属性默认值为currentColor，可以通过给父按钮设置颜色，让图标自动继承：

.searchButton {
    /* 保留原有样式 */
    color: red; /* 图标会自动继承这个颜色 */
}

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