Failure of antd Static Methods to Respond to Themes

In the past, in version 4, these static methods could be used in non-component environments, such as using message.error in axios to display error messages.

Now, in version 5, it is necessary to use const { message } = App.useApp();.

Does this mean that we can no longer use them as before?

Solution

Of course not. Refer to the demo below. By defining the corresponding instance variables in a separate file, you can still use them in non-React environments and they will still respond to themes.

Principle Analysis

antd-style provides a getStaticInstance interface in the ThemeProvider, from which users can obtain the integrated instance.

The implementation principle of this method is also simple. Taking message as an example:

tsx

‌
‌
‌
‌

In the past, in version 4, these static methods could be used in non-component environments, such as using message.error in axios to display error messages.

Now, in version 5, it is necessary to use const { message } = App.useApp();.

Does this mean that we can no longer use them as before?

Solution

Of course not. Refer to the demo below. By defining the corresponding instance variables in a separate file, you can still use them in non-React environments and they will still respond to themes.

Principle Analysis

antd-style provides a getStaticInstance interface in the ThemeProvider, from which users can obtain the integrated instance.

The implementation principle of this method is also simple. Taking message as an example:

tsx

Table of Contents

Table of Contents

Solution

Principle Analysis

Solution

Principle Analysis

Table of Contents

Table of Contents

How to Resolve the Issue of antd Static Methods such as Modal and message Not Responding to Themes?

Solution

Principle Analysis

How to Resolve the Issue of antd Static Methods such as Modal and message Not Responding to Themes?

Solution

Principle Analysis