如何在JSX中实现多个React图标hover时显示不同颜色

1. 保留现有CSS代码 #

你当前的CSS已经通过CSS变量--color实现了悬停背景色的动态控制，无需修改：

.icon-background {
    color: rgba(49, 45, 44, 0.8);
}

.icon-background:focus,
.icon-background:hover {
    background-color: var(--color);
    transition-duration: 0.2s;
    padding: 2.5px;
}

2. 在JSX中动态传递颜色参数 #

通过元素的style属性，给每个带.icon-background类的图标元素单独设置--color变量的值，就能实现不同图标对应不同悬停颜色。

示例代码（React场景） #

假设你使用第三方图标库（如Font Awesome），可以按以下方式实现：

// 定义页脚图标数据：包含图标组件、跳转链接、悬停颜色
const footerIcons = [
  { icon: FaGithub, url: 'https://github.com/xxx', hoverColor: '#181717' },
  { icon: FaTwitter, url: 'https://twitter.com/xxx', hoverColor: '#1DA1F2' },
  { icon: FaLinkedin, url: 'https://linkedin.com/in/xxx', hoverColor: '#0A66C2' },
];

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-icon-group">
        {footerIcons.map((item, idx) => {
          const Icon = item.icon;
          return (
            <a
              key={idx}
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              className="icon-background"
              // 动态绑定CSS变量
              style={{ '--color': item.hoverColor }}
            >
              <Icon />
            </a>
          );
        })}
      </div>
    </footer>
  );
}

3. 关键注意点 #

• style属性中CSS变量名需要用引号包裹（如'--color'），因为变量名包含连字符，符合JS对象键名的语法要求
• 颜色值支持十六进制、RGB、RGBA等所有CSS合法格式
• 如果使用自定义图标组件，要确保style属性能透传到最终渲染的DOM元素上（可通过props.style传递）

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