用react搭建一个项目，配套安装antd及修改主题色

react文档 ↓

https://reactjs.bootcss.com/

需要在电脑上先安装好 Node >= 8.10 和 npm >= 5.6

该项目名称为“niu-ts-react” ↓ （其中npx并不是拼写错误，是npm5.2+附带的package运行工具）

npx create-react-app niu-ts-react

cd niu-ts-react

npm start

网页自动跳出，长这样儿 ↓

用编辑器打开这个项目，src目录里有很多文件，是之后开发不需要的。直接删掉。只留下图的两个即可 ↓

根据网页提示，将其中涉及到的刚删掉内容进行修改。修改位置都在这两个文件中。

tada~~

一个react就起来喽~

安装antd（和react配套的ui库）

项目文件夹下打开小黑窗，输入 ↓

npm install antd --save

因为antd中用less的语法，我们一起将less也配置一下。为了方便后面修改主题色，我们用antd文档的高级配置中的内容 ↓
https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn

安装craco ↓

yarn add @craco/craco

修改 package.json 文件里 script 属性 ↓

  "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
  }

在src下的 index.js 文件中，加入以下代码 ↓

import 'antd/dist/antd.less';

在项目根目录中创建一个 craco.config.js 文件，用于将来修改默认配置。

安装 craco-less ↓

yarn add craco-less

在使用 antd 组件的页面先引入 antd组件 ↓

import { Button, Space } from "antd";
import { SearchOutlined } from "@ant-design/icons";

    按钮
    
        搜索
    
    
        点击以上传
    

该页面显示如下图 ↓

接下来修改主题色。
在刚刚创建的craco.config.js 文件中 ↓

const CracoLessPlugin = require('craco-less');

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

引入成功，主题色会变为下图所示的绿色 ↓

tada~~

主题色修改完毕~