antd 组件css的浏览器兼容性解决方案

最新推荐文章于 2024-09-08 21:34:32 发布

愤怒的佛手瓜

最新推荐文章于 2024-09-08 21:34:32 发布

阅读量2.5k

点赞数

文章标签： css javascript 前端 react

本文链接：https://blog.csdn.net/h666000/article/details/130831363

版权

文章讲述了在使用AntDesign5时遇到360浏览器样式显示异常的问题，原因是Antd5采用了新的CSS语法。解决方案是引入@ant-design/cssinjs库中的StyleProvider和transformers，如legacyLogicalPropertiesTransformer，以确保兼容性。此外，还提到了可替代的global方法来兼容所有浏览器。

摘要由CSDN通过智能技术生成

1. where方法兼容性

最近写了几个后台管理，用的antd5最新版。开始都一切正常，直到测试提到360浏览器的样式有问题。才发现antd5的样式全部添加了css新语法，360浏览器完全不认识。

详情请戳：https://ant.design/docs/react/compatible-style-cn

1."@ant-design/cssinjs": "^1.5.6",
    npm i @ant-design/cssinjs


2.在入口index.tsx里面


import App from "./App";
import store from "./store/index";

import { Provider } from "react-redux";
import { createRoot } from "react-dom/client";

import { ConfigProvider } from "antd";

// 兼容360浏览器
import {
  StyleProvider,
  legacyLogicalPropertiesTransformer,
} from "@ant-design/cssinjs";

import "dayjs/locale/zh-cn";
import locale from "antd/locale/zh_CN";

const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);

root.render(
  <ConfigProvider
    locale={locale}
    theme={{
      token: {
        colorPrimary: "#863326",
      },
    }}
  >
    <Provider store={store}>
      <StyleProvider
        hashPriority="high" //要把where删除掉 详细看这个链接 https://ant.design/docs/react/compatible-style-cn
        transformers={[legacyLogicalPropertiesTransformer]}
      >
        <App />
      </StyleProvider>
    </Provider>
  </ConfigProvider>
);