如何让React FontAwesomeIcon鼠标悬停时不改变颜色

嘿，这个问题很常见！主要原因是你的<Link>可能继承了全局hover样式，或者FontAwesome图标默认会继承父元素的颜色属性，导致hover时被改成黑色。下面给你几个靠谱的解决方案：

方法1：用更具体的CSS选择器锁定图标 #

先给图标加个专属类名，然后在样式里明确设置hover状态的颜色，确保覆盖继承样式：

组件代码： #

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

// ...

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

普通CSS样式写法： #

/* 默认状态图标为白色 */
.home-icon {
  color: white;
}

/* 链接hover时，强制图标保持白色 */
.homeButtonLink:hover .home-icon {
  color: white;
}

如果用Material-UI的makeStyles，可以这么写：

const useStyles = makeStyles({
  homeButtonLink: {
    '&:hover': {
      '& .home-icon': {
        color: 'white',
      },
    },
  },
});

方法2：内联样式直接锁定颜色 #

FontAwesome图标最终会渲染成<svg>标签，你可以直接给图标设置颜色，同时避免hover时被父元素样式覆盖：

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

如果有不必要的颜色过渡效果，可以再加transition: 'none'关闭它。

方法3：排查全局样式冲突 #

有时候全局的<a>标签hover样式会影响你的链接，比如：

a:hover {
  color: black;
}

这种情况下，用优先级更高的选择器覆盖即可：

.homeButtonLink:hover svg {
  color: white;
}

（尽量少用!important，优先通过更具体的选择器提升优先级）

试试上面的方法，应该就能让图标在hover时保持白色啦！

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