上节课我们介绍了如何在脚手架中使用antd的时候能够按需引入样式，这节课我们来说一说，使用antd如何能够自定义主题。

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单的回顾。

  • 不能一次性直接引入所有UI组件的样式，需要按需引入
  • 按需引入样式需要修改脚手架默认配置
  • 我们需要借助react-app-rewired，customize-cra以及babel-plugin-import库来完成按需引入

以上便是我们上节课的主要要点，这些东西其实也不需要死记，因为一个项目是不是也就只需要配置一次按需引入的支持啊，所以说大家了解了就好，而且每个UI组件库封装的都不一样，也许换了UI组件库之后我们就要换一种方法来支持按需引入了。接下来我们开始这节课的内容。

需求背景

我们之前说过，我们的antd的主色调是不是蓝色？而且是支付宝的蓝，毕竟这个UI库本来就是蚂蚁金服开发出来的。但是如果我这个项目的主色调不想用蓝色的话怎么办呢？比如我们想用橙色，那么我们怎么去修改呢？

我们的小案例中那个小按钮的话，最简单的方法是不是直接到页面中，看这个按钮上都加了哪些样式，然后直接修改掉就行了？但是我们一个项目中不肯能一个一个元素去找啊。另外有一点，antd的样式里面有些样式加了权重了，我们自己去写的话，有可能根本就没法把antd的样式给覆盖掉。

那么我们应该这么办呢？这就得用到我们的自定义主题的操作了。这个操作的底层原理是什么呢？就是去查找到antd底层主题颜色的变量，然后去修改掉。

自定义主题

那么我们知道了自定义主题的底层原理，那么我们应该怎么做才能够实现自定义主题呢？我们在来看官方文档，继续往下拉，在下面就有关于自定义主题的内容。

image-20220118112857066

首先还是要依赖于我们之前提到的config-overrides.js文件，而且还要依赖less和less-loader这两个库，那么我们来安装一下这两个库。然后我们来看一下官方给的代码：

首先还是引入依赖，比之前多了一个addLessLoader。然后再看下面，style属性我们这次不能写css了，因为现在不是对css的按需引入了，所以说我们整理改成一个bool值，改为true，然后再调用addLessLoader来加载我们自定义的内容。但是这一段是什么意思呢？首先我们要允许使用js来修改底层的less，然后配置我们要修改的变量。

那么我们用官方给的代码来试一下看看效果：

image-20220118115227606

是不是很尴尬？报错了，还是底层的错误。那么我们怎么办呢？我们来看最后面的这些错误提醒，说我们不允许使用modifyVars了，我来问大家，是不是我们之前说4.x版本的文档不详细使用让我们先去看3.x版本的文档。就是这么回事儿，4.x版本中已经不允许写现在3.x版本中的这个写法了。那么我们应该怎么写呢？我们来看，报错提醒里面是不是说允许使用lessOptions等等，那么这里面这几个对象是不是就只有lessOptions看起来像一点？其实我们可以去4.x里面看一下，既然我们在用4.x版本的antd，那么看旧版本的文档然后报错了，那么我们坑定要去看4.x版本的文档啊，自己在这瞎猜什么呢啊。

官方通过craco库来完成了按需引入和自定义主题的操作。那么我们根据官网的提示来做一下操作吧：

我们来改一下代码：

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  babel: {
    plugins: [
      [
        'import', {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true,
        }
      ],
      [
        '@babel/plugin-proposal-decorators',{legacy: true}
      ]
    ]
  }
};

这一部分官方文档是并没有，需要大家查阅babel以及lessLoader方面的资料。那么我们这次再来看一下效果：

image-20220118124333773

这次我们便可以展示出官网上所说的哪个绿色的按钮。

总结

  • 需要依赖craco库
  • 需要依赖craco-less库
  • 新版本和旧版本差异没有在官方文档中体现出来，大家需要自己查阅相关资料

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/antd_theme/