当前位置：首页 > React

react中如何引入antdesign

2026-03-11 07:23:55React

安装 Ant Design 依赖

在项目根目录下运行以下命令安装 Ant Design 及其依赖：

npm install antd
# 或使用 yarn
yarn add antd

引入样式文件

在项目的入口文件（如 src/index.js 或 src/App.js）中引入 Ant Design 的全局样式：

import 'antd/dist/antd.css';

如果使用 CSS Modules 或 Less/Sass，可以通过按需加载优化体积（需配合 babel-plugin-import）。

react中如何引入antdesign

按需加载配置（可选）

安装 babel-plugin-import 以支持按需加载：

npm install babel-plugin-import --save-dev

在 babel.config.js 或 .babelrc 中添加配置：

react中如何引入antdesign

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

使用组件

在 React 组件中直接引入需要的 Ant Design 组件：

import { Button, DatePicker } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <DatePicker />
    </div>
  );
}

自定义主题（可选）

通过修改 webpack 或 craco 配置覆盖 Ant Design 的 Less 变量。以 craco 为例：

安装 craco-less：
```
npm install @craco/craco craco-less
```

创建 craco.config.js：


const CracoLessPlugin = require('craco-less');

module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };


### 国际化配置（可选）

设置语言包以支持中文或其他语言：
```javascript
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      {/* 其他组件 */}
    </ConfigProvider>
  );
}