Search code examples
reactjstypescriptantd

Antd change message.success icon color

I am currently trying to change the theme of antd. However I am unable to change the icon color for messages:

Example success message

This is what I currently have:

<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,
      }
    }}
  >

Seems that with the ConfigProvider it is not working.

The icon color should match the successColor, configured via the ConfigProvider's theme parameter. I also want to change the message.error, message.warning and message.info color later on.

Solution

  • As per Antd documentation you should use the message.useMessage hook as of version 5.

    Why can't ConfigProvider props (like prefixCls and theme) affect ReactNode inside message.info, notification.open, Modal.confirm? antd will dynamic create React instance by ReactDOM.render when call message methods. Whose context is different with origin code located context. We recommend useMessage, useNotification and useModal which , the methods came from message/notification/Modal has been deprecated in 5.x.

    https://ant.design/components/config-provider#locale-is-not-working-with-vite-in-production-mode