Styled Components问题：react-icons图标可触发Hover效果但自定义SVG图标无法触发

这个问题我之前也碰到过！核心原因是本地SVG文件里可能自带了固定的fill属性，而你通过create-react-app的ReactComponent方式导入的SVG会保留这个属性，导致父元素<SocialIconLink>的color样式无法覆盖SVG的填充色；而react-icons库的图标组件，默认是让fill继承父元素的color值，所以hover时颜色能正常变化。

具体差异： #

• react-icons的<FaTwitter/>这类组件，内部SVG元素没有硬编码fill属性，会自动继承父元素的文字颜色，所以你给<SocialIconLink>设置color和:hover的color时，图标会同步变化。
• 你的本地twitter.svg文件里，大概率写死了fill="#fff"或者其他固定颜色，比如类似这样的代码：

  <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  

  这种硬编码的fill优先级比父元素的color高，所以hover时父元素颜色变了，SVG还是保持原来的填充色。

两种可行的解决方法： #

方法1：修改本地SVG文件，移除固定fill属性

打开你的twitter.svg，找到最外层<svg>标签里的fill属性直接删掉。比如把：

<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24">

改成：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

这样SVG就会自动继承父元素的color，hover效果就能正常触发了。

方法2：在Styled Components里强制SVG继承父元素颜色

如果不想修改SVG源文件，可以给<SocialIconLink>里的SVG元素添加样式，让它的fill绑定父元素的颜色：

export const SocialIconLink = styled.a`
  color: #fff;
  font-size: 24px;
  &:hover {
    color: #F59AA6;
    transition: 0.3s ease-out;
  }
  /* 新增这行，强制SVG继承父元素的color值 */
  svg {
    fill: currentColor;
  }
`;

currentColor是CSS关键字，它会自动取当前元素的color属性值，这样不管父元素的color怎么变化，SVG的填充色都会同步跟随。

这两种方法都能解决问题，我个人更推荐方法2，不用修改SVG源文件，后续维护起来更灵活~

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