解决 Ant Design V5 样式兼容问题

徐同保

已于 2023-08-16 10:14:29 修改

阅读量831

点赞数

分类专栏： web前端文章标签： react native

于 2023-08-15 17:39:09 首次发布

本文链接：https://blog.csdn.net/xutongbao/article/details/132303799

版权

web前端专栏收录该内容

735 篇文章 15 订阅

订阅专栏

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import store from './store'
import Router from './router/Router'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN'
import {
  StyleProvider,
  legacyLogicalPropertiesTransformer,
} from '@ant-design/cssinjs'
import uaParser from 'ua-parser-js'
// import "./static/font/iconfont.css"
// import 'antd/dist/reset.css';
import './static/css/light.css'
import './static/css/light2.css'
import reportWebVitals from './reportWebVitals'
//解决低版本浏览器Promise.finally is not function问题
import './utils/promise.finally.polyfill'

const getHashPriorty = () => {
  let ua = uaParser(navigator.userAgent)

  const { browser } = ua
  let major = browser.version.split('.')[0] - 0
  if (browser.name === 'Chrome' && major > 88) {
    return 'low'
  } else if (browser.name === 'Firefox' && major > 78) {
    return 'low'
  } else if (browser.name === 'Safari' && major > 14) {
    return 'low'
  } else {
    return 'high'
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <HashRouter>
      <ConfigProvider locale={zhCN}>
        <StyleProvider
          hashPriority={getHashPriorty()}
          transformers={[legacyLogicalPropertiesTransformer]}
        >
          <Router></Router>
        </StyleProvider>
      </ConfigProvider>
    </HashRouter>
  </Provider>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()