当前位置：首页 > React

如何安装antd react

2026-03-30 21:54:55React

安装 Ant Design (antd) 到 React 项目

确保已创建 React 项目
在安装 antd 之前，需确认已有 React 项目。若未创建，可通过以下命令初始化：

npx create-react-app my-app
cd my-app

通过 npm 或 yarn 安装 antd

使用 npm 或 yarn 安装 antd 包：

npm install antd
# 或
yarn add antd

引入 antd 组件

在 React 文件中直接导入需要的组件即可使用。例如引入按钮和日期选择器：

import { Button, DatePicker } from 'antd';

按需加载样式（推荐）

通过配置 babel-plugin-import 实现按需加载样式，减少打包体积。安装插件：

如何安装antd react

npm install babel-plugin-import --save-dev
# 或
yarn add babel-plugin-import -D

在项目根目录的 babel.config.js 或 .babelrc 中添加配置：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }]
  ]
}

全局样式（可选）

若需全局样式，可在入口文件（如 src/index.js）中引入：

如何安装antd react

import 'antd/dist/antd.css';

使用主题定制（可选）

通过修改 config-overrides.js（需安装 customize-cra 和 less）定制主题：

npm install customize-cra less less-loader --save-dev

配置示例：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('antd', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      modifyVars: { '@primary-color': '#1DA57A' },
      javascriptEnabled: true,
    },
  }),
);