Ant Design 的图标组件默认通过内联 SVG 的 fill 属性控制颜色，而非 CSS 的 color，因此直接对图标元素设置 color 或 !important 无效；应使用 style 属性传入 color，或通过 svg 的 fill 显式覆盖。
ant design 的图标组件默认通过内联 svg 的 `fill` 属性控制颜色，而非 css 的 `color`，因此直接对图标元素设置 `color` 或 `!important` 无效；应使用 `style` 属性传入 `color`，或通过 `svg` 的 `fill` 显式覆盖。
Ant Design 的图标（如 <leftcircleoutlined></leftcircleoutlined>）本质上是封装好的 SVG 组件，其内部 SVG 元素的填充色由 fill 属性决定，而该属性在渲染时通常被硬编码为 currentColor 或具体颜色值（如 #000），并不响应父级元素的 CSS color 值（除非显式设为 currentColor 且父级 color 生效）。这也是为什么你在 .rotateLeftIcon 中设置 color: red !important 无效——它影响的是文本颜色，而非 SVG 的 fill。
✅ 正确做法：通过 style 属性直接控制图标颜色：
import { LeftCircleOutlined } from '@ant-design/icons';
<LeftCircleOutlined
style={{
color: '#ef0303', // ✅ 有效：Ant Design 图标会将此值透传至 SVG 的 fill
fontSize: '44px',
}}
/>⚠️ 注意事项：
-
style={{ color: '...' }}是最简洁、推荐的方式，Ant Design 内部已适配该行为（自动映射到 SVGfill）； - 若需 CSS 类名方式控制，必须精确选择 SVG 元素并覆盖
fill：.rotateLeftIcon svg { fill: #ef0303 !important; /* ✅ 关键：target svg, not the wrapper */ }并确保该规则未被更高优先级样式（如全局
* { color: #fff }）间接干扰（*选择器不影响fill，但若误用color则无效）； - 避免滥用
!important：优先使用更具体的 CSS 选择器或内联style，保持样式可维护性； - 全局重置样式（如
* { color: #fff }）仅作用于继承性属性，fill不继承自color，除非显式写为fill: currentColor—— 而 Ant Design 图标默认正是fill="currentColor"，因此理论上父级color应生效。但因图标组件自身可能设置了color内联样式或 CSS 变量覆盖，实际开发中仍建议以style.color为准，最可靠。
总结：覆盖 Ant Design 图标颜色，请始终优先使用 <icon style="{{" color:></icon>；若需复用 CSS 类，务必通过 .my-icon svg { fill: xxx !important; } 精准定位 SVG 元素，并验证浏览器开发者工具中 fill 属性是否被成功应用。
