如何在 React 中实现 SVG 悬停变色（解决 fill 属性冲突问题）

本文详解 react 中 svg 元素 hover 无法变色的常见原因——内联 fill 属性优先级过高，并提供可复用的 css-in-js 和 classname 方案，确保多元素 svg 也能统一响应悬停状态。

在 React 项目中，为 SVG 图标添加悬停变色效果本应简单直接：通过 :hover 选择器修改 fill 或 color 即可。但实践中常遇到「部分 SVG 不响应 hover」的问题——正如你所描述：4 个图标中仅第 3 个（倒数第二个）失效，而其他正常。根本原因在于：该 SVG 的 标签内硬编码了 fill="#818181"。

CSS 的 :hover .sidebarSvg path 规则无法覆盖内联 fill 属性（其 CSS 特异性高于普通类选择器），导致悬停样式被忽略。

✅ 正确做法：移除所有内联 fill 和 stroke 声明，将颜色控制完全交由 CSS 管理：

然后在 CSS 中统一控制颜色与悬停行为：

/* 默认状态：继承父级 color */
.sidebarSvg {
  width: 50px;
  height: 50px;
  fill: currentColor; /* 关键！让 path 继承父级 color */
  transition: fill 0.2s ease;
}

.sidebarIcon {
  color: #818181; /* 初始颜色 */
}

.sidebarIcon:hover {
  color: #007bff; /* 悬停时改变 color，自动传导至 fill */
}

? 进阶提示：

• 若 SVG 包含多个 且需不同颜色（如图标含背景+前景），可为各路径添加独立 class（如 class="icon-bg" / class="icon-fg"），再通过 .sidebarIcon:hover .icon-fg { fill: #007bff; } 精准控制；
• 使用 CSS 变量可进一步提升主题灵活性：

  .sidebarSvg { fill: var(--icon-color, #818181); }
  .sidebarIcon:hover { --icon-color: #007bff; }

⚠️ 注意事项：

• 不要依赖 !important 覆盖内联样式——这违背可维护性原则；
• 避免在 JSX 中写 style={{ fill: '...' }}，它与内联属性具有同等高优先级；
• 对于从 Figma/Sketch 导出的 SVG，建议使用 SVGOMG 在线工具自动清理冗余属性（包括 fill、stroke、style 等）。

总结：React 中 SVG 悬停失效，90% 源于内联颜色属性抢占控制权。坚持「样式归 CSS，结构归 JSX」原则，用 currentColor 或 CSS 变量解耦颜色逻辑，即可实现稳定、可扩展的交互效果。