Antd5兼容360浏览器

:where 降级

import { ConfigProvider, App as AntdApp, Spin } from 'antd';
import {
  StyleProvider,
  legacyLogicalPropertiesTransformer,
} from '@ant-design/cssinjs';

const App = () => {
  return (
    <StyleProvider
      hashPriority="high"
      transformers={[legacyLogicalPropertiesTransformer]}
    >
        // ...
    </StyleProvider>
  )
};

export default App;

自定义 class 不生效，关闭 hash

import { ConfigProvider, App as AntdApp, Spin } from 'antd';
import {
  StyleProvider,
  legacyLogicalPropertiesTransformer,
} from '@ant-design/cssinjs';

const App = () => {
  return (
    <StyleProvider
       hashPriority="high"
       transformers={[legacyLogicalPropertiesTransformer]}
    >
       <ConfigProvider
          theme={{
            hashed: false,
          }}
          locale={zhCN}
       >
        // ...
       </ConfigProvider>
    </StyleProvider>
  )
};
export default App;

修改 modal、message、notification 引入方式

新建 message.ts 文件

import { App } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
import type { NotificationInstance } from 'antd/es/notification/interface';

let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, 'warn'>;

const CustomMsg = () => {
  ({ message, modal, notification } = App.useApp());
  return null;
};

export default CustomMsg;

export { message, notification, modal };

在入口文件引入空的 CustomMsg，需要 AntdApp 包裹

import { ConfigProvider, App as AntdApp } from 'antd';
import {
  StyleProvider,
  legacyLogicalPropertiesTransformer,
} from '@ant-design/cssinjs';
import CustomeMsg from '@/utils/message';

const App = () => {
  return (
      <StyleProvider
        hashPriority="high"
        transformers={[legacyLogicalPropertiesTransformer]}
      >
        <AntdApp>
          <ConfigProvider
            theme={{
              hashed: false,
            }}
          >
            <CustomeMsg />
            // ...
          </ConfigProvider>
        </AntdApp>
      </StyleProvider>
  );
};

export default App;

使用 message

import { message, notification, modal } from '@/utils/message';

notification.error({
    message: `请求错误 ${status}: ${data}`,
    description: errorText,
});

message.error('登录已失效即将跳转登录');

modal.confirm({
    title: '删除确认',
    content: '确认删除已编辑的草稿内容，删除后不可恢复',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
        // 执行删除
    },
});

引入 AntdApp 后，全局样式可能会收到影响，需要覆写一下样式

.ant-app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: unset !important;
  font-family: "Microsoft YaHei", sans-serif !important;
}

组件内部 message 的另一种使用方式

import { message as AntdMessage } from 'antd';

const Component = () => {
  const [message, contextHolder] = AntdMessage.useMessage();

  useEffect(() => {
    message.error('文件格式不正确，请选择 png/jpg/jpeg 图片！');
  }, []);

  return (
    <div>
      {contextHolder}
    </div>
  );
};

export default Component;

某些按钮显示边框，单独修改样式

outline: none;