浅谈antd5兼容

最新推荐文章于 2025-10-23 11:55:22 发布

原创最新推荐文章于 2025-10-23 11:55:22 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

React 专栏收录该内容

1 篇文章

订阅专栏

antd是一个流行的ReactUI组件库，其新版本5进行了技术升级，但不支持如360等特定浏览器的兼容性。文章指出，对于需要广泛浏览器支持的项目，antd5的`:is(cssselector)`可能会导致样式问题，尤其是在弹出层组件上。开发者可以选择放弃使用某些功能或检测浏览器支持性来提供错误界面。

antd是一个非常流行的 React UI 组件库，antd5升级之后做了更多的技术优化和更新，在设计和使用上有很多优点，但也存在一些不足之处。

永远遵循新的不一定就是最好的观点不动摇

在选择UI框架的同时，一定要考虑项目的背景，使用的用户群体。

鸡肋：兼容性

如果你需要支持浏览器的兼容性，如360，那么不好意思，不支持。这里必须吐槽一句，确实是个很鸡肋的事情，毕竟360的用户在国内的用户量也不算少，由于国内禁用了google的服务，国内大量小白用户是不会去下载chrome浏览器的，更多的会考虑微软Edge、Mozilla Firefox
、Apple Safari以及360。

正如官网所说Ant Design v5 使用的是 :where css selector 降低 CSS-in-JS hash 值优先级，但是部分浏览器是不支持的，即使按照官网所提供的样式兼容，其实也只是兼容那些标签类的组件，比如弹出层类的组件，由于是脱离了root节点之外插入的，所以基本类似message这种组件的样式全部丢失，官方也是为了方便上下文的传递。

两个方案，
一是所有的静态方案放弃使用，在顶层调用自己去封装
在这里插入图片描述
二是放弃兼容，可以判断浏览器是否支持语法，给出对应的错误界面

let isSelectorSupported;
try {
  document.querySelector(':is(#foo, #bar)');
  isSelectorSupported = true;
} catch(e) {
  isSelectorSupported = false;
}
console.log(isSelectorSupported);