写前端写久了，我们对 UI 组件升级这事似乎再熟悉不过——
但只要一升级大版本，你就会发现：
它像在考试，你像在裸奔。
AntD 6.0.0 发布之后，
我一边看更新日志，一边感觉官方在说：
“我们这次真的没乱改 API（大部分）……
至于改了的部分，你再忍忍吧。”
这篇文章算是我对 6.0 版本 的一次“补坑 + 吐槽 + 解析”合集：
系统地串起本次升级到底动了哪些刀子、砍在你哪里、如何避免当场去世。
看完你会更清楚：
- AntD 6到底改了什么
- 哪些会影响你项目
- 哪些会让你怀疑人生
- 哪些会让你想尊敬作者
- 以及为什么你要升级
- 升级注意事项
一、从 6.0 开始：AntD 终于把旧锅清干净了
每个 UI 框架大版本的第一件事就是：
清垃圾。
这次 AntD 6 做了 4 类大收拾：
① 彻底移除 IE —— 终于
IE 死透了之后，AntD 也不装了：
- reset.css 不给 IE 面子了
- 构建目标提升
- 各种兼容性逻辑直接移除
一句话：
以后再有客户说要兼容 IE，就让他自己兼容自己。
② 清退废弃 API
比如：
- Dropdown.Button：直接没了
- Icon 占位组件：没了
- BackTop：没了
- List 组件：整段 remove
这些组件早就劝你不用了，
你不用，官方就把它“自然淘汰”了。
③ React 19：默认支持
React 19 一堆 break change。
但 AntD 官方一句：
“我们全都处理好了。”
非常稳。
④ 内部库大换血
classNames → clsx
copy-to-clipboard → 移除
一句话版本：
AntD 6/ 不只是 UI 组件升级，
是整个底层工程体系换代。
从现在开始，你用 AntD 的项目才算“站在 2025 年前端的主流线上”。
二、ConfigProvider：从“老好人”变成“全村指挥中心”
AntD 6 里 ConfigProvider 已经不是个配置组件了，
而是 中央政务大厅。
什么都归它管。
比如：
- Table 的 rowKey
- Tooltip / Popover / Popconfirm 的箭头
- Card.Meta 的样式
- Space 的 root
- Modal 的按钮属性
- 全局主题 token
- zeroRuntime 关闭 CSS-in-JS
- tooltip.unique 支持平滑移动
简单说：
以前你在每个组件上写 props，
现在你在 ConfigProvider 一次性“拍板”。
这次更新官方主打一件事：
“所有配置，能收敛就收敛，别让你每个组件都粘粘糊糊地写 props。”
这一点给我一种非常舒服的感觉。
就像写一个业务页面时终于不必：
<Tooltip arrow={{ pointAtCenter: true }} />
<Popover arrow={{ pointAtCenter: true }} />
<Popconfirm arrow={{ pointAtCenter: true }} />
现在直接：
<ConfigProvider
componentSize="middle"
tooltip={{ unique: true }}
popover={{ arrow: { offset: 6 } }}
/>
UI 管理这事终于逻辑清晰了。
三、性能优化：这波是真的有感
AntD 每次说“优化性能”，
我都会下意识怀疑：
“你是不是只是把一个变量换了个名字。”
但这次是真的狠。
比如 Tooltip 优化开发模式性能，官方说：
提升大约 40%
40% 是什么概念？
就是你在调试 Tooltip 的时候，延迟从“卡得你怀疑人生”变成“至少不卡了”。
Form 也优化了大量字段卸载时 useWatch 的性能。
Form 重、复杂，一直是大家吐槽对象，
现在能感受到明显顺滑。
四、新组件：Masonry 瀑布流
没想到 AntD 终于把瀑布流组件给补上了。
而且不是什么半吊子，
是真的独立组件 Masonry，
自带：
一句话：
再也不用自己写 column-count hack 或者用三方库了。
瀑布流终于不是前端黑魔法了。
五、组件语义化结构：前端生态卷到头了（重点）
这是 Ant Design 6.0 的魂。
是整个大版本最重大的变革。
如果你没升级 6，但你是写 AntD 的，这段必须看。
AntD 把所有组件的 DOM 结构统一成一种语义化结构规则，例如：
- icon
- header
- container
- actions
- meta
- wrapper
- content
- control
- list
- panel
以前组件之间 DOM 结构差异巨大，
写样式像在开盲盒：
- 有时候叫
.ant-card-body
- 有时候叫
.ant-card-content
- 有时候是 inline 样式压不下去
- 有时候 className 名字长得像报错日志
统一语义化之后：
- DOM 结构可预测
- className 可枚举
- 定制能力统一
- 样式覆盖清晰
- configProvider 遍历配置变得可能
- 个性化主题更可控
更绝的是：
官方搞了“语义结构生成函数”
也就是说 DOM 结构不是写死的，
而是通过 props 动态生成。
你可以理解成：
AntD 的 DOM 是“模板 + 逻辑”，不是“硬写在源码里”。
这代表什么？
→ 更灵活的主题
可以随便改节点结构。
→ 更易维护
以后搞一个“大型企业主题改造”，你不会改到吐。
→ 更易适配 RTL、多语言
逻辑位置直接跟着结构走。
→ 更容易写自动化 UI 测试
因为 DOM 结构更可预测。
语义化结构本质是在说：
“AntD 的 DOM，我们终于不再乱搞了。”
六、逻辑位置（logical placement）：从 left/right 到 start/end
AntD 全面替换：
- left → start
- right → end
- expandIconPosition → expandIconPlacement
- pagination.position → pagination.placement
- dotPosition → dotPlacement
为什么？
因为为了 RTL（阿拉伯语等） 。
以前 RTL 要：
- 改方向
- 改布局
- 改翻转图标
- 写一堆 override CSS
现在你只写：
placement="start"
浏览器自然判断方向。
这是国际化大厂常用的布局写法，
AntD 这次完全对齐了未来趋势。
七、一堆“终于支持了”的功能
这次更新日志很长，但我总结一下：
✔ Drawer 支持拖拽大小（resizable）
这功能多少人自己 hack 过？
✔ DatePicker 加预览值（hover preview）
巨实用。
✔ Pagination 输入框只能输入数字
谢谢你们终于发现用户不是工程师。
✔ Cascader 支持 aria- /data-
可访问性终于跟上。
✔ Tag 支持 disabled / href
以前 Tag 想当链接自己写半天。
✔ Modal / Image 遮罩支持模糊
UI 更现代。
✔ Notification 支持自定义进度条颜色
意味可以做渐变主题。
✔ Alert closable 支持回调
总算可以「关闭动画结束再干活」了。
✔ Segmented 支持 tooltip
这终于成“按钮组”而不是“看上去像按钮的东西”。
✔ Splitter 自定义拖拽图标
重度后台 UI 的福音。
一句话：
AntD 6 加的不只是新功能，而是“实现了以前你以为它早就有的功能”。
八、CSS 变量 & zeroRuntime：样式体系升级
AntD 6 的主题系统真正步入现代化：
√ 默认使用 CSS variables
终于从 emotion / css-in-js 中解放一部分性能。
√ 新 token：colorBorderDisabled
一致的禁用状态样式。
√ zeroRuntime
完全禁用 css-in-js，
也就是 ——
样式只靠 CSS，不靠 JS 动态生成。
你可以：
- 减少 JS 包体积
- 减少样式计算开销
- 加速 SSR
- 加速 hydration
AntD 6 的主题系统已经接近 Tailwind / Radix 那种“现代架构”了。
九、为什么我推荐升级？
你可能会问：
“那 6.0 值得升级吗？项目会不会炸？”
非常诚恳的回答：
值得，也不会那么炸。
原因：
① 95% 以上 API 是平滑升级
破坏性更新都集中在：
业务层代码影响小。
② 性能是真的提升
不仅仅是理论。
③ 现代化工程趋势
写 AntD 6 的项目，
你整套结构、体验都比以前“干净一大截”。
④ Theme & DOM 语义化结构是质变
未来大项目会非常依赖它。
十、从 v5 → v6：升级你不能忽视的细节（重点）
下面这一段是你真正必须看的。
1. React 版本必须 ≥ 18
React 17 没救了。
你还在 17，也别想上 v6。
顺便：
- import '@ant-design/v5-patch-for-react-19';
删了。
v6 原生支持 React 19。
2. IE 全面退役，CSS Variables 必须支持
如果你们还有“客户的电脑装的是 Windows XP + IE 8”这种用户群：
别升级，真的会出事。
国产浏览器老版本（早期双核）也可能炸。
升级前请确认：
- Chrome ≥ 79
- Edge ≥ 79
- Safari ≥ 13.1
- Firefox ≥ 72
3. 自定义样式若依赖 antd 内部 DOM → 必须自查
v6 动了非常多 DOM：
⚠️ Collapse icon 结构改了
⚠️ Modal DOM 改了
⚠️ Tag DOM 改了
⚠️ Form、Table 内部 className 整理
⚠️ Tooltip DOM 结构变化
⚠️ Pagination input 限制只能输入数字
如果你的项目里出现这种写法：
.ant-modal > div > .ant-modal-content > .ant-modal-header { … }
祝你好运 😅
升级必删这些 hack。
4. 弹层默认 mask blur（我再强调一次，很关键）
升级后突然出现模糊效果，不要以为浏览器坏了。
关掉模糊：
<ConfigProvider modal={{ mask: { blur: false } }} />
5. Tag margin 被移除
如果你布局像下面这样：
TagA TagB TagC
升级后会变成：
TagATagBTagC
补救方案见上面。
6. Form onFinish 不再返回 Form.List 未注册的值
v5 的行为有点奇怪：
哪怕 Form.List 子项没有真正注册 Form.Item，onFinish 也会把整个结构返回给你。
v6 改对了。
旧写法（v5）
const real = getFieldsValue({ strict: true });
新写法（v6）
const real = values;
清爽了。
十一、升级 Checklist（实战角度）注意点
我给你强化版 checklist：
✔ React ≥ 18
必要条件。
✔ 移除 React 19 patch 包
已经内置支持。
✔ 检查浏览器兼容性（CSS variables）
如果 Target 覆盖移动端旧机型，请特别留意。
✔ 手动查一遍自定义样式
重点组件：
- Modal
- Drawer
- Collapse
- Tooltip
- Form
- Table
- Tag
✔ 检查 mask blur 是否符合设计稿
不符合就禁用。
✔ 构建配置检查
必须确保 CSS-in-JS 正常工作：
- vite + swc
- webpack + babel
- rspack
✔ 处理所有 console warning
v5 的 deprecated API 你必须提前清理。
全面检查完成后
npm install --save antd@6
# 或
yarn add antd@6
# 或
pnpm add antd@6
ok，完成升级，升级后也别忘了检查下页面
十二、写在最后：当你再看“AntD 更新日志”
AntD 从 4 → 5 → 6 的过程里，
可以看到这套设计体系从“能用” → “好用” → “可扩展”的完整升级链。
6.0 明显把重点从“功能性组件”转向了“工程体系完善”：
- 语义化结构
- CSS 变量
- zeroRuntime
- 全局配置体系
- RTL 逻辑位置
- 全量优化性能
- 更易维护
- 更深度主题化
这次是一次真正意义上的“大版本重构”，
不是换皮。
作为前端工程师，我们当然可以继续：
复制 UI → 调接口 → 写页面 → 交付上线。
但如果你真的想变强，
你需要知道：
- 框架为什么这样设计
- DOM 结构为什么要语义化
- 为什么 UI 库要用 RTL
- 为什么 CSS-in-JS 要被部分取代
- 为什么配置要靠 provider 收敛
- 为什么组件属性要统一成 placement
这些“看起来只是升级日志的小点”，
背后都是前端生态发展的方向。
别再说“写 UI 没技术含量”这种低情商话了。
UI 库的技术含量，你甚至想象不到。
登录
