解决 Ant Design v5.26.5 与 React 19.0.0 的兼容性问题

啃火龙果的兔子2025-07-22 11:47

#目前 Ant Design v5.x 官方尚未正式支持 React 19（截至我的知识截止日期2023年10月），但你仍可以通过以下方法解决兼容性问题：

bash 复制代码

npm install antd@5.26.5 --legacy-peer-deps

或修改 package.json 后安装：

json 复制代码

{
  "scripts": {
    "install": "npm install --legacy-peer-deps"
  }
}

如果你使用 Yarn，可以在 package.json 中添加：

json 复制代码

{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

然后运行：

bash 复制代码

yarn install

bash 复制代码

npm install react@18.2.0 react-dom@18.2.0

关注 Ant Design GitHub 的更新，官方将在未来版本中添加 React 19 支持。

bash 复制代码

npm list react
npm list react-dom
npm list antd

确保实际运行的版本符合预期。

如果使用 TypeScript，确保类型定义兼容：

bash 复制代码

npm install @types/react@18 @types/react-dom@18

在 React 19 中增强的 hydration 可能导致警告，可暂时禁用：

jsx 复制代码

// 在根组件中
import { StrictMode } from 'react';

function App() {
  return (
    // 暂时移除 StrictMode
    <div>
      <YourApp />
    </div>
  );
}

在 _app.js 或入口文件中确保优先加载 Ant Design 样式：

js 复制代码

import 'antd/dist/reset.css'; // 必须在你的全局样式之前导入
import '../styles/globals.css';

如果以上方法无效，考虑：