Antd ConfigProvider配置主题后无法修改message组件图标颜色怎么办？

问题原因 #

仅通过ConfigProvider的全局token配置无法直接修改Message组件的图标颜色，因为这些图标颜色属于组件级样式变量，未与全局token自动关联。

解决方案 #

方案一：使用ComponentToken配置（推荐） #

在ConfigProvider的theme中添加componentToken，针对Message组件单独配置各状态的图标颜色，直接绑定已定义的全局token：

<ConfigProvider
  theme={{
    token: {
      yellow: colors.yellow500,
      blue: colors.blue500,
      green: colors.teal500,
      red: colors.red400,
      colorPrimary: colors.blue500,
      colorError: colors.red400,
      colorInfo: colors.blue500,
      colorSuccess: colors.teal500,
      colorWarning: colors.yellow500,
      lime: colors.lime500,
      purple: colors.purple500,
      cyan: colors.cyan500,
      colorLink: colors.blue500,
    },
    componentToken: {
      Message: {
        successIconColor: '{colorSuccess}',
        errorIconColor: '{colorError}',
        warningIconColor: '{colorWarning}',
        infoIconColor: '{colorInfo}'
      }
    }
  }}
>
  {/* 应用内容 */}
</ConfigProvider>

方案二：全局CSS覆盖（备选） #

如果组件级token配置不生效，可通过全局CSS选择器直接覆盖图标颜色：

/* 成功消息图标 */
.ant-message-success .anticon {
  color: #14b8a6; /* 对应colors.teal500 */
}

/* 错误消息图标 */
.ant-message-error .anticon {
  color: #f43f5e; /* 对应colors.red400 */
}

/* 警告消息图标 */
.ant-message-warning .anticon {
  color: #eab308; /* 对应colors.yellow500 */
}

/* 信息消息图标 */
.ant-message-info .anticon {
  color: #3b82f6; /* 对应colors.blue500 */
}

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