如何引入+react+组件库

安装组件库依赖

通过 npm 或 yarn 安装目标组件库。以 Ant Design 为例，执行以下命令：

npm install antd

或

yarn add antd

引入组件库样式

在项目的入口文件（如 src/index.js 或 src/main.js）中全局引入组件库的 CSS 文件。对于 Ant Design：

import 'antd/dist/antd.css';

按需引入组件

在需要使用组件的地方单独引入，避免打包体积过大。例如引入 Ant Design 的 Button 组件：

import { Button } from 'antd';

配置主题（可选）

如需自定义主题，可通过组件库提供的主题配置工具实现。Ant Design 可通过 craco 或 modifyVars 修改 Less 变量：

// craco.config.js
const CracoLessPlugin = require('craco-less');

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

使用组件

在 React 组件中直接使用引入的组件：

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

处理兼容性

若项目使用老旧技术栈（如 Webpack 4），可能需要额外配置 Babel 插件实现按需加载。安装 babel-plugin-import 并配置 .babelrc：

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