一、问题描述

当在ts中使用message静态方法时，即使配置了ant design 主题，也无法被应用到静态方法触发的message上。这是因为，静态方法可能并没有经过ConfigProvider的配置，导致在非ConfigProvider包裹的地方，样式无法应用到静态触发的message上。

二、解决思路

既然静态方法无法应用到主题样式，那就在ConfigProvider包裹的组件中进行全局message初始化，在全局挂载一个messageApi。项目任何地方需要message就调用这个全局的messageApi，以此替代message默认的静态方法。

三、功能实现

1、构建message单例

import { type MessageInstance } from 'antd/es/message/interface';

let message: MessageInstance | null = null;

// 包含ConfigProvider组件初始化时设置全局messageApi
export const setGlobalMessage = (instance: MessageInstance) => {
  message = instance;
};

//  调用挂载的全局messageApi
export const getGlobalMessage = () => {
  if (!message) {
    throw new Error('Message组件初始化失败!');
  }
  return message;
};

2、初始化全局messageApi

const [messageApi, messageHandler] = message.useMessage();

useEffect(() => {
  setGlobalMessage(messageApi);
}, [messageApi])

return <ConfigProvider>
  { messageHandler }

</ConfigProvider>

3、使用全局messageApi（任何地方）

getGlobalMessage().error({
  content: 'message内容',
});