首先，所有介绍

1.安装

yarn  ass antd 或者 npm install antd

2.引用

import { Button } from antd;  // 引入组件

import  antd/dist/antd.css;  // 引入样式

第二，按需引入

官网->版本->3.x->在 create-react-app 中使用->找到 # 高级配置 # 按照高级配置逐步安装配置；

链接地址： https://3x.ant.design/docs/react/use-with-create-react-app-cn

第三、antd 自定义主题

官网->版本->3.x->在 create-react-app 中使用->找到 # 自定义主题 # 分步安装配置；

链接地址： https://3x.ant.design/docs/react/use-with-create-react-app-cn

注意 有一个小坑：升级 无法使用modifyvas

因此，有必要改变为可辨认的外观；

点击蓝色字的配置主题，可查看更多其他配置项；

总结 按需引入定制主题。

1。安装依赖项    yarn add react-app-rewired customize-cra babel-plugin-import less less-loader  或者 npm install react-app-rewired customize-cra babel-plugin-import less less-loader

2.修改了下图 package.jon

3.创建根目录config-overrides.js

const {override, fixBabelImports, addLessLoader} = require(customize-cra)
module.exports = override(
    fixBabelImports(import, {
        libraryName: antd,
        libraryDirectory: es,
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {@primary-color: #1DA57A}
        }
    })
)

注意：遇到坑

一.执行上述操作后出现以下错误。

二. 分析和解决问题：

问题分析：这实际上是 less-loader less 版本太高且不兼容。 getOptions 函数方法，所以您需要 less-loader less 降级处理

解决问题：yarn remove less less-loader 或者 npm uninstall less less-loader 用于卸载原始版本的命令 less-loader，然后 通过yarn add less-loader@3.0.0 less@^2.7.3 或者 less-loader@3.0.0 less@^2.7.3 命令下载降级版本。 less-loader 和less版本，这个问题是可以解决的。