❌

阅读视图

发现新文章，点击刷新页面。

🌹🌹🌹bro，AntD 6.0.0 来了

✇掘金 前端
你心里的于晏

写前端写久了，我们对 UI 组件升级这事似乎再熟悉不过——
但只要一升级大版本，你就会发现：

它像在考试，你像在裸奔。

AntD 6.0.0 发布之后，
我一边看更新日志，一边感觉官方在说：

“我们这次真的没乱改 API（大部分）……
至于改了的部分，你再忍忍吧。”

这篇文章算是我对 6.0 版本 的一次“补坑 + 吐槽 + 解析”合集：
系统地串起本次升级到底动了哪些刀子、砍在你哪里、如何避免当场去世。

看完你会更清楚：

  • AntD 6到底改了什么
  • 哪些会影响你项目
  • 哪些会让你怀疑人生
  • 哪些会让你想尊敬作者
  • 以及为什么你要升级
  • 升级注意事项

image.png

一、从 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，
自带：

  • 自动排布
  • 响应式
  • 插槽
  • 逻辑位置支持（RTL）

一句话：

再也不用自己写 column-count hack 或者用三方库了。

瀑布流终于不是前端黑魔法了。

image.png

五、组件语义化结构：前端生态卷到头了（重点）

这是 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 是平滑升级

破坏性更新都集中在：

  • 废弃组件
  • 部分位置 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 库的技术含量，你甚至想象不到。

❌