如何仅覆盖单个antd Info类型Alert组件的图标样式？

方案一：添加自定义className精准匹配 #

• 给需要单独设置的Alert组件添加唯一的自定义类名，比如custom-info-alert：

<Alert
    description="自定义图标颜色的提示内容"
    type="info"
    showIcon
    className="custom-info-alert"
    style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }} 
/>

• 在样式表中通过自定义类+Antd原有类的组合选择器，精准定位图标并修改颜色：

.custom-info-alert.ant-alert-info .ant-alert-icon {
  color: #3d6de7;
}

这里不需要加!important，因为组合选择器的优先级高于全局的.ant-alert-info .ant-alert-icon，能确保样式只作用于目标Alert。

方案二：利用prefixCls属性隔离样式 #

• Antd组件支持prefixCls属性修改类前缀，给目标Alert设置独特前缀：

<Alert
    description="自定义图标颜色的提示内容"
    type="info"
    showIcon
    prefixCls="custom-alert"
    style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }} 
/>

• 编写对应前缀的CSS样式：

.custom-alert-info .custom-alert-icon {
  color: #3d6de7;
}

这个方案会让该Alert的所有类前缀都变成custom-alert，彻底和全局Alert样式隔离，适合需要多维度自定义该组件的场景。

方案三：直接传入自定义图标组件 #

• 放弃使用Antd默认图标，通过icon属性传入自定义的图标组件，直接控制颜色：

import { InfoCircleOutlined } from '@ant-design/icons';

<Alert
    description="自定义图标颜色的提示内容"
    type="info"
    icon={<InfoCircleOutlined style={{ color: "#3d6de7" }} />}
    style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }} 
/>

这种方式无需额外编写CSS，逻辑直观，适合仅需修改图标颜色的简单场景。

内容的提问来源于stack exchange，提问作者JarochoEngineer