一、需求
Ant Design Pro搭建的項(xiàng)目酪呻，需要內(nèi)嵌到公司內(nèi)部的瀏覽器中使用羞迷，項(xiàng)目單獨(dú)使用時(shí)用的是比較新的chrome版本的瀏覽器界轩，沒(méi)有問(wèn)題。但是內(nèi)嵌到瀏覽器中衔瓮，樣式丟失了浊猾。
-
正常情況：
image.png -
內(nèi)部瀏覽器：
image.png
二、原因
調(diào)查后發(fā)現(xiàn)是內(nèi)部瀏覽器版本太老热鞍，無(wú)法兼容antd v5版本的樣式寫法
樣式兼容 - Ant Design
image.png
三葫慎、解決方案
1.按照文檔嘗試解決
但是antd pro沒(méi)有一個(gè)統(tǒng)一的入口文件，入口是在src/app.tsx中通過(guò)layout組件配置使用的薇宠，要找到全局配置的地方偷办，否則改動(dòng)較大。
image.png
image.png
2.通過(guò)umi進(jìn)行全局配置
但是配置后不生效澄港，后續(xù)查閱應(yīng)該是版本問(wèn)題
umi-antd配置文檔
umi中配置styleProvider沒(méi)有生效? · umijs/umi · Discussion #11346
image.png
image.png
3.通過(guò)rootContainer運(yùn)行時(shí)配置解決
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>
);
};
