antd-v5浏览器兼容问题

[18228076235]

由于客户端的版本 Chrome/87.0不能兼容Ant Design v5使用的:where css selector （Chrome/88.0）所以如果需要在客户端加载其他使用到antd-v5的资源需要进行兼容；
参考antd官网样式兼容（https://ant.design/docs/react/compatible-style-cn）
基础样式，非弹窗类

import React from 'react';
import { StyleProvider } from '@ant-design/cssinjs';
// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装 ,移出后需要检查自定义样式的优先级
//  :where() 选择的元素，优先级为 0，移除后通常使用class（优先级为1），因此如果有自定义样式需要做兼容
export default () => (
  <StyleProvider hashPriority="high">
    <App/>
  </StyleProvider>
);

弹出层类的组件如（message.，notification.，Modal.）
静态方法无法感知 React Context，调用处需要改造成 useMessage 或者 useApp 的 hooks 版本用法

把modal,message的 context 挂载到在Layout层通过Provider的方式向下注入

export type TContext = {
  modal: Omit<ModalStaticFunctions, "warn">;
  message: MessageInstance;
};
export const LayoutContext = createContext<TContext>({} as any);
function Layout() {
  const [modal, ctx] = Modal.useModal();
  const [message, messageCtx] = Message.useMessage();
  return (
    <LayoutContext.Provider value={{ modal, message }}>
      {ctx}
      {messageCtx}
      <RootStyled>
        <Outlet />
      </RootStyled>
    </LayoutContext.Provider>
  );
}

或者使用App包裹组件

import { App, Button, Space } from 'antd';

// Sub page
const MyPage = () => {
  const { message, modal,} = App.useApp();
  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };
  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
      <Button type="primary" onClick={showModal}>
        Open modal
      </Button>
    </Space>
  );
};
// Entry component
export default () => (
  <App>
    <MyPage />
  </App>
);