当前位置：首页 > React

如何引入 react 组件库

2026-01-24 05:13:38React

安装 React 组件库

通过 npm 或 yarn 安装所需的组件库。例如，安装 Ant Design：

npm install antd
# 或
yarn add antd

引入组件库样式

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

import 'antd/dist/antd.css'; // 引入 Ant Design 的 CSS 文件

按需引入组件

为避免打包体积过大，推荐按需引入组件。例如，使用 Ant Design 的 Button 组件：

如何引入 react 组件库

import { Button } from 'antd';

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

配置按需加载（可选）

对于支持按需加载的库（如 Ant Design），可以通过插件（如 babel-plugin-import）优化引入方式。安装插件：

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

在 babel.config.js 中配置：

如何引入 react 组件库

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
    }],
  ],
};

使用主题定制（可选）

部分组件库支持主题定制。以 Ant Design 为例，可以通过修改 less 变量覆盖默认样式。安装 less 和 less-loader：

npm install less less-loader --save-dev

在 webpack.config.js 中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': '#1890ff', // 修改主题色
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};