antd5 在低版本浏览器样式解决方案

一、调查原因

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

样式不对的浏览器 console 控制台输入 navigator.userAgent 检测浏览器信息，最终结果是 where 不兼容 chrome 88 以下的版本

二、解决方法

与 antd 有关直接看官方文档，直接去 antd 搜索 :where ，根据文档进行如下操作：

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

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

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

ts
 代码解读
复制代码
import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs'import { ConfigProvider } from 'antd'// `hashPriority` 默认为 `low`，配置为 `high` 后，会移除 `:where` 选择器封装export function rootContainer(container: React.ReactNode) {  return (    <ConfigProvider prefixCls="your-antd-prefix-class-name">       // 这个是核心的解决方案，建议不要在项目中多次使用 StyleProvider      <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>        {container}      </StyleProvider>    </ConfigProvider>  )}

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

antd 中可以直接 message.xxx、Modal.xxx、notification.xxx 静态方法调用展示 UI，但是这些静态方法的样式在低版本浏览器中仍然不支持 :where 愈发, 所以需要优雅降级来解决。

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

ts
 代码解读
复制代码
// src/compatible/antd.tsx/*说明： 兼容低版本的浏览器，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: MessageInstancelet notification: NotificationInstancelet modal: Omit<ModalStaticFunctions, 'warn'>const antd5Prefix = 'your-antd-prefix-class-name'// 兼容 antd5 在 chrome80 部分样式 css 特性不支持的问题， 专门解决部分样式丢失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 }

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

ts
 代码解读
复制代码
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解决",      })    }   ...   } }

免费试用 更多热门智能应用