React的antd-ui库的使用以及主题变化

在react开发中，最好用的就是antd这个ui库了，那么怎么使用这个ui库呢？

首先安装

yarn add antd

我们就以button按钮为例子:因为这个按钮旁边还有图标，所以还需要安装一下@ant-design/icons语义化的矢量图形

yarn add @ant-design/icons

代码:

import  {Button} from 'antd'
import {PoweroffOutlined} from '@ant-design/icons'

  <Button type="primary" loading>
 Loading
</Button>
   <Button type="primary" size="small" loading>
  Loading
 </Button>
  <Button type="primary" icon={<PoweroffOutlined />} loading />

效果如下:

官方的案例是这样的：

有没有发现哪不一样，背景颜色改了，下面就要讲怎么修改主题颜色了

首先安装一个东西

yarn add @craco/craco

然后我们到package.json里面，将scripts改成这样的

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

接下来我们在src的同级目录，创建一个craco.config.js文件

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

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

modifyVars里面可以设置我们要改的主题颜色，我设置的#1DA57A，所以颜色就变了，注意，最好重新启动一下项目