当前位置：首页 > React

react 中如何引入antd

2026-01-24 17:21:48React

安装 Ant Design

在 React 项目中安装 Ant Design 及其依赖，使用 npm 或 yarn 执行以下命令：

npm install antd

或

yarn add antd

引入组件

在需要使用 Ant Design 组件的文件中，按需引入所需的组件和样式：

import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入全局样式

按需加载样式（可选）

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

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

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

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

使用组件

在 React 组件中直接使用 Ant Design 提供的组件：

function App() {
  return <Button type="primary">Primary Button</Button>;
}

自定义主题（可选）

通过修改 webpack 或 craco 配置自定义主题变量。以 craco 为例，安装依赖：

npm install @craco/craco craco-less --save-dev

创建 craco.config.js 并配置：

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

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

国际化配置（可选）

设置语言包以支持国际化：

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <Button type="primary">按钮</Button>
    </ConfigProvider>
  );
}

react 中如何引入antd