Ant Design Pro 在低版本浏览器运行时样式丢失问题解

一、需求

Ant Design Pro搭建的项目，需要内嵌到公司内部的浏览器中使用，项目单独使用时用的是比较新的chrome版本的浏览器，没有问题。但是内嵌到浏览器中，样式丢失了。

• 正常情况：

  
  image.png

• 内部浏览器：

  
  image.png

二、原因

调查后发现是内部浏览器版本太老，无法兼容antd v5版本的样式写法
样式兼容 - Ant Design

image.png

三、解决方案

1.按照文档尝试解决

但是antd pro没有一个统一的入口文件，入口是在src/app.tsx中通过layout组件配置使用的，要找到全局配置的地方，否则改动较大。

image.png
image.png

2.通过umi进行全局配置

但是配置后不生效，后续查阅应该是版本问题
umi-antd配置文档
umi中配置styleProvider没有生效? · umijs/umi · Discussion #11346

image.png
image.png

3.通过rootContainer运行时配置解决

运行时配置

image.png

• 在 src/app.tsx 里自己套一层 <StyleProvider> 解决

import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
export const rootContainer = (container: JSX.Element) => {
  return (
    <StyleProvider layer hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
      {container}
    </StyleProvider>
  );
};