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', // 按需加载 polyfillcorejs: 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>
  );
}