从 v5 到 v6：这次 Ant Design 升级真的香

2025 年 11 月底，Ant Design 正式发布了 v6 版本。

回顾过去，从 v3 到 v4 的断崖式升级，到 v5 引入 CSS-in-JS 带来的心智负担和性能压力，很多前端同学一提到"升级"就条件反射般护住发际线。但这一次，Ant Design 团队明显听到了社区的呼声。

v6 没有为了"创新"而搞大刀阔斧的重构，而是聚焦于解决长期痛点 、提升开发体验 和平滑迁移。本文结合一线业务开发中的真实场景，聊聊 v6 的核心变化，以及这次升级到底值不值得升。

样式覆盖不再是"玄学"

你一定深有体会：设计师要求改 Select 下拉框背景色、调整 Modal 头部内边距，或者给 Table 的某个单元格加特殊样式。在 v5 及之前，你只能打开控制台，一层层扒 DOM 结构，找到类似 .ant-select-selector 的 class，然后用 :global 或 !important 暴力覆盖。一旦组件库内部 DOM 微调，你的样式就崩了。

全量 DOM 语义化 + 细粒度 classNames / styles API

v6 对所有组件进行了 DOM 语义化改造 （如用 <header>、<main> 等代替无意义的 <div>），更重要的是引入了复数形式的 classNames 和 styles 属性，让你直接通过语义化的 key 来定制关键区域。

tsx 复制代码

// v6 写法：精准、安全、健壮
<Modal
  title="业务配置"
  open={true}
  classNames={{
    header: 'my-modal-header',
    body: 'my-modal-body',
    footer: 'my-modal-footer',
    mask: 'glass-blur-mask', // 甚至能直接控制遮罩
    content: 'my-modal-content',
  }}
  styles={{
    header: { borderBottom: '1px solid #eee', padding: '16px 24px' },
    body: { padding: '24px' },
  }}
>
  <p>内容区域...</p>
</Modal>

v5 vs v6 对比（Modal 头部样式定制）：

tsx 复制代码

// v5（hack 写法，易崩）
import { global } from 'antd'; // 或直接写 less
:global(.ant-modal-header) {
  border-bottom: 1px solid #eee !important;
}

v6 技术价值

不再依赖内部 class 名：官方承诺这些 key（如 header、body）的存在，即使未来 DOM 结构变化，你的样式依然有效。
支持动态样式 ：styles 属性接受对象，方便结合主题或 props 动态生成。

原生 CSS 变量全面回归

v5 的 CSS-in-JS 方案虽然解决了按需加载和动态主题，但在大型后台系统里，运行时生成样式的 JS 开销仍然明显，尤其在低端设备上切换主题或路由时容易掉帧、闪烁。

v6 的解法：零运行时（Zero-runtime）CSS 变量模式

彻底抛弃 CSS-in-JS，默认使用原生 CSS Variables（Custom Properties）。

体积更小：CSS 文件显著减小（官方称部分场景下减少 30%+）。
响应更快：主题切换只需修改 CSS 变量值，浏览器原生处理，毫秒级生效，无需重新生成哈希类名。
暗黑模式友好 ：直接通过 --antd-color-primary 等变量实现全局主题切换。

这对需要支持多品牌色、暗黑模式的 SaaS 平台来说，是巨大的性能红利。

高频场景官方接管

瀑布流布局、Drawer 拖拽调整大小、InputNumber 加减按钮等，都是业务中常见需求，但之前往往需要引入第三方库或自己手写，增加维护成本和打包体积。

v6 的解法：新增实用组件 & 交互优化

Masonry 瀑布流（内置）

tsx 复制代码

import { Masonry } from 'antd';

<Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gutter={16}>
  {items.map(item => (
    <Card key={item.id} cover={<img src={item.cover} />} {...item} />
  ))}
</Masonry>

Drawer 支持拖拽：原生支持拖拽改变宽度，无需自己写 resize 逻辑。
InputNumber 支持 spinner 模式：加减按钮直接在输入框两侧，像购物车那样。
其他：Tooltip 支持平移（panning）、弹层默认支持模糊蒙层（blur mask）等交互优化。

这些补齐了业务高频场景，减少了"自己造轮子"的痛苦。

升级建议：这次真的"平滑"吗？

v6 迁移关键事实

React 版本要求 ：必须升级到 React 18+（不再支持 React 17 及以下）。
破坏性变更 ：部分 API 被废弃（如 bordered → variant、headStyle → styles.header 等），v7 将彻底移除。
兼容性：v5 项目绝大多数业务逻辑代码无需改动，但若大量使用了深层 hack 样式，可能需要调整。
推荐工具：官方提供 Codemod 迁移脚本，可自动化处理大部分废弃 API。

建议

新项目：直接上 v6，享受更好的性能、体验和未来维护性。
v5 项目：先在 dev 分支尝试升级。无大量 hack 样式的话，成本很低。
v4 及更老项目：跨度较大，建议先逐步迁移到 v5，再升 v6；或在新模块中使用 v6（配合微前端或包隔离）。
升级前检查 ：
- 确认 React ≥ 18
- 运行官方 Codemod
- 验证目标浏览器支持 CSS 变量（IE 彻底不支持）

总结

Ant Design v6 是一次**"返璞归真"**的升级。它把控制权还给开发者（语义化 API），用现代浏览器特性解决性能问题（零运行时 CSS 变量），并补齐了业务高频组件。

升级核心收益

更少的 hack 代码，更健壮的样式
显著的性能提升（主题切换、渲染速度）
官方接管高频业务组件，减少第三方依赖
平滑迁移路径，真正降低了"升级火葬场"的风险

对于业务开发者来说，这意味着：更少的加班、更快的页面、更早下班。

参考链接