ant design v6 正式上线!
本次版本更新聚焦于 技术底层的全面优化,致力于为 React 19 及后续版本提供更强的兼容性与性能支持(最低兼容提升至 React 18),同时进一步强化组件的语义化结构设计,并增强对 CSS 变量的原生支持。
与上一代 v5 相比,此次升级实现了 无缝迁移体验:
若你的项目已在使用 v5 版本,无需引入任何兼容包或 codemod 工具,可直接平滑升级至 v6。
v5 的主分支将迁移至 v5.x-stable,进入为期 1 年的维护阶段。
v6 起正式要求 React 18 作为最低版本,彻底移除了对更早版本的兼容逻辑,避免多版本间 API 行为不一致的问题。我们仍推荐开发者使用最新的 React 19 以获得最优开发体验。
对于如 Modal.confirm 这类静态方法调用,现已无需额外兼容处理:
-- import '@ant-design/v5-patch-for-react-19';
在 antd.js 和 antd.min.js 中已集成 React Compiler 支持,CJS/ESM 用户可根据需要自行启用。
随着 IE 浏览器支持的全面终止,v6 中的 @ant-design/cssinjs 默认启用 纯 CSS Variables 模式:
@ant-design/static-style-extract 使用效果更佳:<configprovider theme="{{" true="" zeroruntime:=""> <app></app></configprovider>
性能对比显示,zeroRuntime 模式表现最优(横轴为加载的主题数量):
可通过 useToken 获取完整的变量命名:
const App = () => { const { cssVar: { colorBgElevated }, } = theme.useToken();};
因采用 CSS Variables 方案,IE 兼容相关的 StyleProvider 已被完全移除。
v6 实现了 全部组件 的 DOM 结构语义化升级:
const btnClassNames: ButtonProps['classNames'] = ({ props }) => { switch (props.type) { case 'primary': return { ... }; default: return { ... }; }};<configprovider btnclassnames="" button="{{" classnames:=""> <app></app><
}> Ant Design
<card body:="" border-green-500="" classnames="{{" header:="" overflow-visible="" root:="" rounded-none="" text-green-500="" title="Hello World" title:=""> Ant Design loves you!~ (=^・ω・^)</card>
v6 移除了所有在 v4 被标记废弃、v5 保留兼容的接口:
findDOMNode 相关兼容逻辑已被删除。详细说明请查看:https://www./link/2528242a42d15858f02248a1fd475db9
下载地址:https://www./link/672cda1d1b10d66f600e6cadcf102b87
源码地址:点击下载