React中的ui组件库之Ant-design的使用，以及实现按需引入步骤和实现自定义主题的步骤（react18）

1）安装

npm i antd

2）看文档使用

例如使用按钮组件

import React, {
    
     Component } from 'react'
//不一定所有的组件都是从antd上引入，例如图标就不是，看文档使用
import {
    
     Button } from 'antd'
//引入整个样式库
import 'antd/dist/antd.min.css'

export default class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                App
                <button>点我</button>
                <Button type="primary">Primary Button</Button>
            </div>
        )
    }
}

3）基本使用

注：ant-design不是适用于所有项目，适用于后台管理项目使用

4）ant-design实现按需引入和自定义主题

1. 安装 @craco/craco 跟 babel-plugin-import

yarn add @craco/craco babel-plugin-import

2. 将package.json文件修改为

"scripts": {
    
    
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3. 此时再安装craco-less（实现自定义主题）,并在根目录创建 craco.config.js文件

/* 
注意:这边一定需要加上一个 --force, 否则会出现一个在 node_modules中会出现一个error
错误是: 在tsconfig-paths中有个文件没有引入的错误, 使用npm i craco-less --force
就没有以下问题
*/
npm i craco-less --force

4. 配置craco.config.js

const CracoLessPlugin = require("craco-less");
// 需要安装两个插件：`yarn add craco-less` `yarn add babel-plugin-import` 从而实现样式的按需引入
module.exports = {
    
    
  plugins: [
    {
    
    
      plugin: CracoLessPlugin,
      options: {
    
    
        lessLoaderOptions: {
    
    
          lessOptions: {
    
    
            modifyVars: {
    
     "@primary-color": "#1DA57A" }, //配置自定义主体色变量
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    
    
    //支持装饰器
    plugins: [
      [
        "import",
        {
    
    
          libraryName: "antd",
          libraryDirectory: "es",
          style: true, //设置为true即是less 这里用的是css，如果是scss，则需要设置为false，否则不能正常生效
        },
      ],
    ],
  },
};

注：这里可以配置Less的变量。
变量有哪些：https://ant.design/docs/react/customize-theme-cn

5. 先停掉项目，再使用yarn start启动项目