首页/文章/react

解决 antd5 在低版本浏览器中部分 css 样式丢失问题

2024-09-03

711 字约 3 分钟

...

学习

因为解决 antd5 在低版本浏览器的文章始终没有解决我的问题，或者是不够优雅，因此做了一点整理，希望对你有用，至少对我是有用的 😁😁😁

调查原因

结果是 css 中是 where 在低版本 chrome 浏览器不起作用

然后就去 caniuse.com/?search=%3A… , 样式不对的浏览器 console 控制台输入 navigator.userAgent 检测浏览器信息，最终结果是 where 不兼容 chrome 88 以下的版本

解决方法

与 antd 有关直接看官方文档，直接去 antd 搜索 :where ，点击样式兼容 - Ant Design 根据文档进行如下操作：

参考： Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

解决非静态方法导致的样式错乱

Umi 中在 app.tsx 中写入 or 如果是自己创建的就在 root 文件中改造如下代码即可

import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs'
import { ConfigProvider } from 'antd'


export function rootContainer(container: React.ReactNode) {
  return (
    <ConfigProvider prefixCls="your-antd-prefix-class-name">
       // 这个是核心的解决方案，建议不要在项目中多次使用 StyleProvider
      <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
        {container}
      </StyleProvider>
    </ConfigProvider>
  )
}

解决 message 等通知静态方法的样式丢失问题

antd 中可以直接 message.xxx、Modal.xxx、notification.xxx 静态方法调用展示 UI，但是这些静态方法的样式在低版本浏览器中仍然不支持 :where 愈发, 所以需要优雅降级来解决低版本浏览器 where, gap（flex) 等 css 失效问题，主要参考 App 包裹组件

新建 src/compatible/antd.tsx 文件，这里的 message 等方法可以直接导出使用（核心就是使用闭包解决）



说明： 兼容低版本的浏览器，antd 的部分组件需要做兼容处理
参考 https://ant-design.antgroup.com/components/app-cn#app-demo-config
*/

import { App } from 'antd'
import { useEffect } from 'react'
import type { MessageInstance } from 'antd/es/message/interface'
import type { ModalStaticFunctions } from 'antd/es/modal/confirm'
import type { NotificationInstance } from 'antd/es/notification/interface'
import { useEventListener } from 'ahooks'
import { detect } from 'detect-browser'

const browser = detect()

let message: MessageInstance
let notification: NotificationInstance
let modal: Omit<ModalStaticFunctions, 'warn'>

const antd5Prefix = 'your-antd-prefix-class-name'


const compatibleCss = `
  .${antd5Prefix}-btn .${antd5Prefix}-btn-icon {
    display: inline-block !important;
    margin-right: 0.25rem !important;
  }
`

type CompatibleContainerProps = {
    children: React.ReactNode
}

export const CompatibleContainer:React.FC<CompatibleContainerProps> = ({children}) => {
  useEffect(() => {
    
    if (browser?.name === 'chrome' && parseFloat(browser.version) <= 80) {
      const compatibleStyleTag = document.createElement('style')

      compatibleStyleTag.innerHTML = compatibleCss
      document.head.appendChild(compatibleStyleTag)
    }
  }, [])


  const staticFunction = App.useApp() 

  message = staticFunction.message
  modal = staticFunction.modal
  notification = staticFunction.notification

  return children 
}

export { message, notification, modal }

更新 src/app.tsx（umi版本）其他雷同

import { CompatibleContainer, notification } from './compatible'
import { ClickToComponent } from 'click-to-react-component'

export function rootContainer(container: React.ReactNode) {
  return (
    <ConfigProvider theme={theme} prefixCls="ant5">
      <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
        <App style={{ height: '100%' }}>
          <CompatibleContainer>{container}<CompatibleContainer/>
          <ClickToComponent />
        </App>
      </StyleProvider>
    </ConfigProvider>
  )
}

export const request: RequestConfig = {
  errorConfig: {
    errorHandler: (e: Record<string, any>) => {
      // 这里的 notification 就不会有样式丢失的问题
      notification?.error({
        message: "请求错误",
        description: e.message || "未知错误，请联系xxx解决",
      })
    }
   ...
   }
 }