解决 Ant Design V5 样式兼容问题

问题： react项目中使用antd: ^5.1.4,然后在360浏览器中发现样式组件不兼容，组件样式错乱。
原因：
根据官方文档， Ant Design V5 组件的样式中大量使用了 :where() 选择器来降低选择器的优先级，以此减少开发者升级组件库时额外调整自定义样式的成本。:where() 对于 Chrome 仅支持 Chrome 88 以上，截止目前 360 极速浏览器的 Chrome 版本为 86，因此无法显示组件样式。

官方解决方案：https://ant-design.github.io/cssinjs/
安装cssinjs（根据我的项目使用antd v5，我安装的是@ant-design/[email protected]版本），然后在入口组件App.tsx中配置使用：

import React from "react";
import {App as AppAnt} from "antd";
import {StyleProvider, legacyLogicalPropertiesTransformer} from '@ant-design/cssinjs';

function App() {
 return (
  <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}> /* 关闭降权操作，移除 :where() 选择器 */
    <AppAnt> /* Ant Design 提供的包裹组件，用于使得 Message、Modal、Notification 等组件的静态调用形式能获取到上下文，从而读取移除 :where() 选择器的配置  */
      包裹原本App的内容
    </AppAnt>
  </StyleProvider>)
}

更多请参考