react中如何引入antdesign

安装 Ant Design

在项目根目录下运行以下命令安装 Ant Design 及其依赖：

npm install antd

或者使用 yarn：

yarn add antd

引入组件

在需要使用 Ant Design 组件的文件中，按需引入所需的组件和样式。例如引入一个按钮：

import { Button } from 'antd';
import 'antd/dist/antd.css'; // 引入全局样式

使用组件

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

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

按需加载样式（可选）

为了减小打包体积，可以使用 babel-plugin-import 实现样式的按需加载。首先安装插件：

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

然后在项目配置（如 babel.config.js）中添加：

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

定制主题（可选）

在项目根目录创建 theme.js 文件，定义主题变量：

module.exports = {
  '@primary-color': '#1890ff',
};

修改 webpack 配置，使用 less-loader 加载主题：

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: require('./theme.js'),
      javascriptEnabled: true,
    },
  },
}