如何引入 react 组件库

安装依赖

确保项目基于 React 环境（如通过 create-react-app 初始化）。通过 npm 或 yarn 安装目标组件库，例如安装 Ant Design：

npm install antd
# 或
yarn add antd

引入样式文件

部分组件库需要单独引入 CSS 文件。以 Ant Design 为例，在项目入口文件（如 src/index.js）添加：

import 'antd/dist/antd.css';

若使用模块化 CSS 或支持按需加载的库（如 Material-UI），可跳过此步骤。

按需导入组件

在需要使用组件的文件中直接导入，例如使用 Ant Design 的按钮：

import { Button } from 'antd';

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

配置按需加载（可选）

对于支持 Tree Shaking 的库（如 Ant Design），可通过 babel-plugin-import 优化打包体积。安装插件后，在 babel.config.js 中配置：

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

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

主题定制（可选）

部分库支持主题变量覆盖。以 Ant Design 为例，通过 modifyVars 修改 Less 变量：

// webpack 配置中修改 less-loader 选项
{
  loader: 'less-loader',
  options: {
    modifyVars: { '@primary-color': '#1DA57A' },
    javascriptEnabled: true,
  },
}

测试组件

运行项目并验证组件是否正常渲染：

npm start