如何在鼠标悬停时做出反应 FontAwesomeIcon 不改变颜色答案

【问题标题】：How to make react FontAwesomeIcon not to change color on mouse hover如何在鼠标悬停时做出反应 FontAwesomeIcon 不改变颜色
【发布时间】：2019-10-30 15:47:45
【问题描述】：

我有一个黑色背景的页面，我在其中使用 React FontAwesome 放置了一个白色图标

<Link to={'/'} className={classes.homeButtonLink}>
  <FontAwesomeIcon icon={faHome} size="2x"/>
</Link>

鼠标在图标上变黑，我看不到它。如何让图标不变色？我已经尝试将 css 应用于图标和链接，但没有成功。

【问题讨论】：

你用 css 做了什么？基本上.icoClass:hover{ color: #000;} 就可以完成这项工作！在哪里用图标的类替换 icoClass
对不起，我实际上是将 css 应用于外部 div 而不是图标本身。谢谢。

标签： javascript css reactjs font-awesome-5 react-font-awesome

【解决方案1】：

我试过这个code。 FontAwesome Icon 在鼠标悬停时不会改变颜色。它只会在鼠标点击时改变颜色。你能用给定的代码重现你的行为吗？

import { BrowserRouter, Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";

import "./styles.css";

const element = (
  <BrowserRouter>
    <Link to={"/"}>
      <FontAwesomeIcon icon={faHome} size="6x" />
    </Link>
  </BrowserRouter>
);

【讨论】：