Ant Design 图标的颜色无法通过 CSS 类名或 !important 覆盖，根本原因在于其 SVG 内联样式优先级更高；推荐直接使用 style 属性设置 color，或通过 theme 属性控制主题色，确保样式生效。
ant design 图标的颜色无法通过 css 类名或 `!important` 覆盖，根本原因在于其 svg 内联样式优先级更高；推荐直接使用 `style` 属性设置 `color`，或通过 `theme` 属性控制主题色，确保样式生效。
Ant Design 的图标组件（如 LeftCircleOutlined）底层渲染为 <svg></svg> 元素，并默认将 color 作为内联 fill 属性注入 SVG 节点中（例如 <svg fill="currentColor" ...></svg>），而 currentColor 会继承父级文本颜色（color）。但问题在于：当全局重置样式（如 * { color: #fff; }）强制设定了所有元素的文本色时，图标虽继承 currentColor，却可能因 React 渲染时机、CSS 作用域或 Ant Design 内部样式逻辑导致类名样式失效——此时 .rotateLeftIcon { color: red !important; } 实际影响的是父级 span 容器的文本色，而非 SVG 的 fill。
✅ 正确且最可靠的方式是直接在组件上透传内联样式：
import { LeftCircleOutlined } from '@ant-design/icons';
<leftcircleoutlined style="{{" fontsize: color: color svg fill></leftcircleoutlined>
该方式由 Ant Design 官方支持：color 属性会被内部转换为 SVG 的 fill 值，且内联样式具有最高特异性，完全绕过 CSS 类冲突。
⚠️ 注意事项：
- 不要依赖
.icon-class svg { color: ... }—— SVG 本身不响应color，需作用于fill； - 若需统一主题色，推荐使用 Ant Design 的
ConfigProvider配置theme，例如：<configprovider theme="{{" components: icon: colorprimary:><app></app></configprovider> - 避免滥用
!important，尤其在全局重置（* { color: #fff; }）场景下，它可能被内联fill或 AntD 动态样式覆盖。
总结：覆盖 Ant Design 图标颜色，请优先使用 style={{ color: 'xxx' }}，这是语义清晰、兼容性好、且被框架原生支持的标准方案；CSS 类覆盖仅适用于极少数定制化 SVG 场景，且需精确选择 svg > path 并设置 fill，而非 color。
