--- order: 8 title: 从 v4 到 v5 --- 本文档将帮助你从 antd `4.x` 版本升级到 antd `5.x` 版本,如果你是 `3.x` 或者更老的版本,请先参考之前的[升级文档](https://4x.ant.design/docs/react/migration-v4-cn)升级到 4.x。 ## 升级准备 1. 请先升级到 4.x 的最新版本,按照控制台 warning 信息移除/修改相关的 API。 ## 5.0 有哪些不兼容的变化 ### 设计规范调整 - 基础圆角调整,由统一的 `2px` 改为四级圆角,分别为 `2px` `4px` `6px` `8px`,分别应用于不同场景,比如默认尺寸的 Button 的圆角调整为了 `6px`。 - 主色调整,由 改为 。 - 整体阴影调整,由原本的三级阴影调整为两级,分别用于常驻页面的组件(如 Card)和交互反馈(如 Dropdown)。 - 部分组件内间距调整。 - 整体去线框化。 ### 技术调整 - 弃用 less,采用 CSS-in-JS,更好地支持动态主题。底层使用 [@ant-design/cssinjs](https://github.com/ant-design/cssinjs) 作为解决方案。 - 所有 less 文件全部移除,less 变量不再支持透出。 - 产物中不再包含 css 文件。由于 CSS-in-JS 支持按需引入,原本的 `antd/dist/antd.css` 也已经移除,如果需要重置一些基本样式请引入 `antd/dist/reset.css`。 - 如果需要组件重置样式,又不想引入 `antd/dist/reset.css` 从而导致污染全局样式的话,可以尝试在应用最外层使用[App 组件](components/app-cn),解决原生元素没有 antd 规范样式的问题。 - 移除 css variables 以及在此之上构筑的动态主题方案。 - LocaleProvider 在 4.x 中已经废弃(使用 `` 替代),我们在 5.x 里彻底移除了相关目录 `antd/es/locale-provider`、`antd/lib/locale-provider`。 - 内置的时间库使用 Dayjs 替代 Moment.js,具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。 - 不再支持 `babel-plugin-import`,CSS-in-JS 本身具有按需加载的能力,不再需要插件支持。 ### 兼容性调整 - 不再支持 IE 浏览器。 #### 组件 API 调整 - 组件弹框的 classname API 统一为 `popupClassName`,`dropdownClassName` 等类似 API 都会被替换。 - AutoComplete 组件 - Cascader 组件 - Select 组件 - TreeSelect 组件 - TimePicker 组件 - DatePicker 组件 - Mentions 组件 ```diff import { Select } from 'antd'; const App: React.FC = () => (