当前位置：首页 > React

如何安装antd react

2026-02-26 04:59:22React

安装 antd（Ant Design）到 React 项目

通过 npm 或 yarn 安装 antd 包。确保已创建 React 项目（如通过 create-react-app）。

npm install antd
# 或
yarn add antd

引入 antd 样式

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

import 'antd/dist/antd.css';

使用 antd 组件

在组件中直接引入需要的 antd 组件即可使用。

import { Button } from 'antd';

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

按需加载优化（可选）

使用 babel-plugin-import 按需加载组件以减少打包体积。

安装插件：

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

在 babel.config.js 或 .babelrc 中配置插件：

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

自定义主题（可选）

通过修改 less 变量覆盖默认主题样式。需安装 less 和 less-loader。

安装依赖：

npm install less less-loader --save-dev
# 或
yarn add less less-loader --dev

在 webpack.config.js 中配置 less-loader：

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

国际化配置（可选）

设置 ConfigProvider 全局配置语言包。

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

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

如何安装antd react