React中如何为react-ionicons图标设置hover悬停变色效果

问题根因 #

react-ionicons 组件最终会渲染为原生SVG元素，默认自带独立的fill属性控制图标颜色，父级<a>标签设置的color属性默认不会被SVG继承，因此你写的hover颜色变化规则无法作用到图标上。

解决方法 #

在现有CSS中新增一行规则，让SVG图标继承父元素的颜色即可，修改后的完整CSS代码如下：

.socials {
  position: absolute;
  right: 100px;
  bottom: 30px;
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.socials li {
  list-style: none;
}
.socials li a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.75em;
  transition: 300ms;
}
/* 新增规则：让SVG使用父级a标签的color值作为填充色 */
.socials li a svg {
  fill: currentColor;
}
.socials li a:hover {
  color: crimson;
}

补充说明 #

你现有JSX代码中所有社交链接的href属性都指向了twitter地址，可根据实际需求修改为对应平台的官方链接。

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