如何引入+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" }]
]
}
