如何让 React 中的 SVG 在悬停时正确变色

当 svg 元素内联设置了 `fill` 属性（如 `fill=”#818181″`），它会覆盖 css 的 `:hover` 样式，导致悬停变色失效；解决方法是移除内联 `fill`，改用 css 控制颜色。

在 react 项目中，为 svg 图标添加悬停交互效果（例如 hover 时改变颜色）是一种常见需求。但你可能会遇到“部分 SVG 不响应 hover”的问题——正如你描述的：4 个图标中前 3 个正常，唯独第 3 个（即倒数第二个）无反应。根本原因在于：SVG 内联的 fill 属性具有更高的 CSS 优先级，会强制锁定颜色，使外部 :hover 规则失效。

以你的代码为例：

这里 标签上直接写了 fill=”#818181″，这属于内联样式（inline style），其 CSS 特异性（specificity）高于普通类选择器（如 .sidebarSvg:hover path），因此即使你在 CSS 中写了：

.sidebarSvg:hover path, .sidebarSvg:hover g {   fill: #007bff !important; /* 即使加了 !important，也可能被内联 fill 覆盖 */ }

它依然无法生效——因为 SVG 渲染引擎会优先采用 的值，除非显式重写该属性。

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

{/* ✅ 修改后：移除 fill="#818181" */}     

然后在 CSS 中统一定义默认色与悬停态：

.sidebarSvg {   fill: #818181; /* 默认填充色（作用于所有子 path/g） */   transition: fill 0.2s ease; }  .sidebarIcon:hover .sidebarSvg, .sidebarIcon:focus .sidebarSvg {   fill: #007bff; /* 悬停时整体变色 */ }  /* 如需更精细控制（例如只变某一层），可加 data 属性或 class */ .sidebarSvg .icon-layer--primary {   fill: currentColor; }

⚠️ 注意事项：

• 若 SVG 包含多层 或 且需不同颜色，建议为关键元素添加 class（如 ），再通过 .sidebarSvg:hover .bg-path { fill: red; } 精准控制；
• 避免使用 !important 修复此类问题——它掩盖了根本原因，且难以维护；
• 使用 currentColor 是一种优雅方案：设置 .sidebarSvg { color: #818181; fill: currentColor; }，这样 hover 时只需改 color，fill 自动同步；
• 在 CodeSandbox 等环境中调试时，可用浏览器开发者工具检查元素计算样式（Computed Tab），确认 fill 是否被内联值锁定。

总结：SVG 悬停失灵 ≠ React 问题，而是 SVG 渲染机制与 CSS 优先级的协同问题。移除内联 fill，拥抱 CSS 管理，是实现可维护、可复用、响应式图标的最佳实践。