如何让 React 中的 SVG 图标在 hover 时正确变色

react 中 svg hover 变色失效，常因内联 fill 属性强制覆盖 css 样式；移除 svg 元素上的内联 fill，并改用 css 类控制颜色，即可实现稳定、可复用的悬停效果。

在 react 项目中，为 SVG 图标添加 hover 交互（如颜色变化）是常见需求。但你可能会遇到「部分 SVG 不响应 hover」的问题——正如你描述的：4 个图标中仅第 3 个（即倒数第二个）无法变色。根本原因在于该 SVG 的 标签中硬编码了 fill=”#818181″：

CSS 的 :hover 规则（例如 .sidebarIcon:hover .sidebarSvg path { fill: #007bff; }）无法覆盖内联 fill 属性，因为内联样式的优先级高于外部 CSS（除非使用 !important，但不推荐）。而其他三个 SVG 恰好未设置内联 fill，因此能正常响应 CSS 控制。

✅ 正确做法：

1. 移除所有内联 fill 和 stroke 属性（包括 和 级别）；
2. 将颜色逻辑完全交由 CSS 类管理；
3. 利用 currentcolor 或 CSS 自定义属性提升可维护性。

优化后的 jsX 示例：

配套 CSS（支持深色模式与主题扩展）：

.sidebarSvg {   display: block;   width: 50px;   height: 50px;   fill: currentColor; /* 继承父元素文字颜色 */   transition: fill 0.2s ease; }  .sidebarIcon {   color: #818181; /* 默认图标颜色 */   text-decoration: none; }  .sidebarIcon:hover {   color: #007bff; /* hover 时改变文字色，SVG 自动同步 */ }  /* 如需独立控制 SVG 颜色（不依赖文字色），可改用 CSS 变量 */ .sidebarSvg {   --icon-color: #818181;   fill: var(--icon-color); }  .sidebarIcon:hover .sidebarSvg {   --icon-color: #007bff; }

? 额外建议：

• 使用 aria-hidden=”true” 明确标识装饰性 SVG，提升无障碍体验；
• 避免在 SVG 中写死 width/height，改用 viewBox + CSS 控制尺寸，确保响应式缩放；
• 对于多图标的统一管理，可封装为 Icon 组件，通过 color prop 动态注入 CSS 变量。

总结：SVG hover 失效不是 React 特有 bug，而是 CSS 层叠规则与内联样式冲突所致。清除内联 fill，拥抱 CSS 类驱动的颜色系统，是简洁、可维护、符合现代前端实践的解决方案。