一、需求
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>
);
};
