admin 管理员组

文章数量: 1184232

问题： 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/cssinjs@1.5.6版本），然后在入口组件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>)
}

更多请参考

本文标签： 样式 浏览器 兼容问题 Design ant

版权声明：本文标题：解决 Ant Design V5 样式在360浏览器兼容问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1738252485a1951107.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。