🍭🍭🍭升级 AntD 6：做第一个吃螃蟹的人

AntD 6 发布之后，网上很多人都在观望：

"要不要升级？"

"会不会炸？"

"我的项目能不能扛得住？"

其实 AntD 官方已经在文档里把升级路径写得非常清楚，只是稍显简略。

下面我用更真实、更工程化的方式，把 v5 → v6 的升级步骤 做了一次加强版讲解，

让你升级时不至于踩坑。

① 第一步：升级到 v5 最新版本（必须执行）

在升级到 AntD 6 之前，官方强烈建议你先把项目从 v5 升到 v5 最新版本：5.29.1。

为什么？

✔ v5 的最新版本会给出所有废弃 API 的 warning

✔ 不处理这些 warning，到 v6 会直接报错

✔ v5 → v6 是平滑升级路径，只要你处理掉 v5 的 warning，升级 v6 就不会炸

执行命令：

css 复制代码

npm install antd@5

装完以后，启动项目，务必一条一条看控制台 warning。

比如：

某个 API 将被移除
某个 props 已废弃
某个组件 v6 即将删除

所有 warning 都处理完，再继续下一步。

这阶段非常关键，等于是在做"升级前全身检查"。

其实你只要用了5的版本基本没啥大问题

② 第二步：确保项目运行在 React 18（或以上）

AntD 6 不再支持 React 17 及以下版本 。

AntD 官方的态度非常明确：

"React 17，我们不救了。"

好消息是：绝大多数前端项目早就 React 18 了。

如果你还停留在 React 17，那建议你别升级 AntD，
你升级 React 本身都要做好打仗的准备。

检查你的 package.json：

json 复制代码

"react": "^18.x.x",
"react-dom": "^18.x.x"

如果不是，那你真的得升级个 der（官方术语：赶紧升 😅）。

React 17 升到 React 18 已经是必经之路，

Suspense、Concurrent、SSR 都已经进入新阶段，不升会拖累整个项目生态。

③ 第三步：开干！升级到 AntD 6

前面两步做完，你的项目基本已经"具备上 6 条件"了。

现在就可以正式开刀：

css 复制代码

npm install --save antd@6

或者你爱用的包管理器：

perl 复制代码

yarn add antd@6
# or
pnpm add antd@6
# or
npm install antd@latest

安装完成后，你的项目就是 AntD 6 正式用户。

④ 第四步：启动项目，处理残留 warning

升级完成以后，重启项目。

你可能会看到一些：

类型定义变动 warning
某些行为变更 warning
某些组件结构调整提示
mask blur 带来的视觉差异
你自己写的样式被 DOM 改动影响

这些属于正常"升级后适配"。

根据提示处理即可。

建议你重点检查以下区域：

✔ 自定义覆盖类名（AntD 6 DOM 有变化）

✔ Modal、Drawer 的 mask 是否出现模糊效果

✔ Table、Form 是否有类型冲突

✔ 已废弃 API 是否仍然使用

✔ 第三方依赖是否引用了 AntD 内部 class

通常处理 1-2 小时就可以全部解决（不解决也行，能跑就行😉）。

⑤ 最终：你就正式吃上了 AntD 6 的"螃蟹"

完成以上步骤后，你就完成了整个升级链路：

清理 v5 废弃 API
升到 React 18（如果你的项目还没）
升到 AntD 6
修复升级后剩余 warning

从此以后：

你可以用 Masonry 瀑布流
你可以用更快的 Tooltip
你可以享受 ZeroRuntime
你可以用语义化 DOM 更好写主题
你的项目正式进入 2025 年的前端栈

一句话：
你是第一个吃螃蟹的人，但这次螃蟹真的不难吃，而且还挺香，哥们已经升级，满嘴流油了。