当前位置：首页 > React

如何安装antd react

2026-02-11 18:53:17React

安装antd react

使用npm安装antd包，确保项目已经初始化并安装了react和react-dom。运行以下命令：

npm install antd

配置按需加载

为了优化打包体积，推荐使用babel-plugin-import实现按需加载。安装插件：

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

在babel配置文件中添加插件：

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

引入样式文件

在项目的入口文件（如index.js或App.js）中引入antd的CSS文件：

import 'antd/dist/antd.css';

使用组件

在React组件中直接引入所需的antd组件：

import { Button } from 'antd';

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

自定义主题

通过修改less变量来自定义主题。安装less和less-loader：

npm install less less-loader --save-dev

在webpack配置中添加less支持：

{
  test: /\.less$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
          },
          javascriptEnabled: true,
        },
      },
    },
  ],
}

国际化支持

antd支持多语言，可以通过LocaleProvider设置语言：

如何安装antd react

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

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <MyApp />
    </ConfigProvider>
  );
}