在 React 项目中添加 Ant Design（以下简称 antd）组件库是一个常见的需求。下面是详细的步骤，教你如何在使用 Vite 创建的 React + TypeScript 项目中集成 antd。
步骤 1：安装 antd 和相关依赖
进入你的项目目录并运行以下命令来安装 antd 和 @ant-design/icons 以及 craco：
npm install antd @ant-design/icons
步骤 2：配置 antd 的样式
为了正确加载 antd 的样式，你需要在项目中引入 antd 的 CSS 文件。你可以在项目的入口文件 src/main.tsx 中进行配置。
打开 src/main.tsx 文件，并在顶部添加以下内容：
import 'antd/dist/reset.css'; // 用于引入 antd 的重置样式
import './index.css'; // 自定义全局样式
在 src/index.css 文件中，可以自定义一些全局样式。
步骤 3：使用 antd 组件
现在你已经完成了 antd 的安装和样式配置，可以开始在你的 React 组件中使用 antd 组件。
例如，在 src/App.tsx 中：
import React from 'react';
import { Button, DatePicker } from 'antd';
const App: React.FC = () => {
return (
<div style={{ padding: 50 }}>
<h1>Hello, Ant Design!</h1>
<Button type="primary">Primary Button</Button>
<DatePicker />
</div>
);
};
export default App;
步骤 4：启动开发服务器
一切准备就绪后，重新启动开发服务器：
npm run dev
打开浏览器并访问 http://localhost:5173，你会看到你的 React 应用中已经成功使用了 antd 组件。
总结
通过以上步骤，你已经成功地在使用 Vite 创建的 React + TypeScript 项目中集成了 antd 组件库，并且能够顺利地使用 antd 提供的各种 UI 组件。根据实际需要，你还可以进一步配置主题、国际化等高级功能。
