umi4 antd5、antd plots2x在低版本浏览器样式显示错误

npm install --save @babel/preset-env core-js regenerator-runtime

安装babel，用上面的指令

在umi4的配置文件.umirc.ts中，添加babel配置

  extraBabelPresets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '58', // 这里指定 Chrome 的最低版本为 58
        },
        useBuiltIns: 'usage', // 按需加载 polyfill
        corejs: 3, // 使用 corejs 3 作为 polyfill 的来源 
      },
    ],
  ],

如果没有效果的化

打开src/layouts/index.tsx文件

导入core-js，手动转换兼容低版本浏览器

import 'core-js/es/promise';
import 'core-js/features/array/flat-map';
import 'core-js/features/array/flat';

 

有时在低版本浏览器上会出现样式不起效果的情况。

样式兼容 - Ant Design

npm install @ant-design/cssinjs

打开src/layouts/index.tsx文件，增加StyleProvider

import { Outlet } from 'umi';
import { StyleProvider } from '@ant-design/cssinjs'
 
export default function Layout() {
  return (
 
    <StyleProvider hashPriority='high'>
      <Outlet />
    </StyleProvider>
  );
}