『Ant Design』主题定制

一、前言

🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 2 篇，主要介绍『Ant Design』的进阶玩法主题定制

进阶玩法是什么内容呢？其实就是『Ant Design』的主题定制，那么什么是主题定制呢？简单来说就是我们可以通过修改『Ant Design』的样式变量来定制我们自己的主题，这样就可以让我们的项目看起来更加炫酷，更加符合我们的审美。

在上一篇文章中介绍使用时，我们使用的 Button 与 Switch 默认的主色调都是蓝色，但是在企业开发中，自己公司的项目，往往都有自己的主题色，这时候我们就需要对『Ant Design』的主题进行定制，让它符合我们自己的主题色。

二、主题定制

打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容：

Ant Design 提供了一种很酷的方式，让你可以根据自己的业务和品牌需求，自由地定制样式，以满足不同的视觉喜好。这包括全局样式，比如主题颜色、圆角和边框样式，还有特定组件的外观定制。简而言之，你可以轻松地让 Ant Design 看起来符合你的品牌和业务的独特需求。

三. 4.x

• Ant Design 4.x 版本主题定制

方式一（修改样式变量，2B铅笔做法）

在 Ant Design 4.x 版本中，我们可以通过 less 和 CSS 变量来定制主题，什么意思呢？就是官方编写了一些样式变量，我们可以通过修改这些样式变量来定制我们自己的主题，例如我们可以修改主题色，让它符合我们自己的主题色。

在哪里可以找到这个文件呢，就是项目依赖文件夹 node_modules 中，然后找到 antd 文件夹，然后找到 dist 文件夹，然后找到 antd.less 文件，这个就是 Ant Design 的样式文件，我们可以在这个文件中找到 Ant Design 的样式变量，然后修改这些样式变量，就可以定制我们自己的主题了：

方式一的修改修改的是什么文件？这个文件在 node_modules 中，很明显这个文件是 Ant Design 的源码，过去我在其它的技术文章中说过，不推荐直接修改框架或者第三方库的文件，那么不推荐修改那怎么办呢？所以这里就要说到方式二了。

方式二（webpack 配置修改，配置恐惧症慎用）

通过介绍得知是通过 modifyVars 属性来定制主题的，这里还要通过 webpack 来进行配置，webpack 如果对于学过的同学来说如果通过这种方式来配置的话，应该都是比较熟悉的，如果对于没有学过的同学来说，是不是还是有点复杂的，也不友好。

如果是通过 webpack 来配置的话，那么我们这个项目是通过什么方式创建的，是不是通过 create-react-app 来创建的，前面我在讲解脚手架的时候我也介绍过，通过脚手架创建默认情况下是把 webpack 隐藏起来的。

如果想要修改 webpack 的配置是不是还要将 webpack 给暴露出来，通过 npm run eject 显示 webpack 配置，然后在 webpack 配置文件中找到 less-loader，在 less-loader 中将下图中的配置添加进去：

在 modifyVars 属性中，我们可以通过修改 Ant Design 的样式变量来定制我们自己的主题。

这样也不太好，因为我们通过脚手架创建项目的时候，它将 webpack 配置文件隐藏起来了，为什么隐藏起来呢？因为它不想让我们去修改 webpack 配置文件，因为 webpack 配置文件是一个很复杂的配置文件，如果我们去修改的话，很容易出错，所以它将 webpack 配置文件隐藏起来了。

对于 webpack 是什么都不知道的人来说根本无从下手，所以这里就要说到方式三了。

方式三（通过 craco，推荐）

官方文档：https://4x.ant.design/docs/react/use-with-create-react-app-cn

第三种方式在 create-react-app 菜单中，刚好我们项目是通过这种方式创建的，在这个菜单中告诉我们有一个高级配置：

高级配置中介绍到对 create-react-app 的默认配置进行自定义，这里我们使用 craco，那么 craco 的作用是什么呢？

只要你安装了 craco，就可以在项目根目录创建一个 craco.config.js 文件，然后在这个文件中进行配置，然后它就会把你新建的这个配置文件和隐藏的那个 webpack 配置文件进行合并，这样就可以对 webpack 进行配置了。

这个时候我们就不用去修改那个隐藏的 webpack 配置文件了，我们只需要在 craco.config.js 文件中进行配置就可以了，这样就不会影响到隐藏的 webpack 配置文件了。

这个时候隐藏 webpack 中那些比较复杂的配置我们就不用去接触了，只需要专注于我们自己的配置就可以了，这样就可以避免出错了。

说了这么多，我们就来实战一下（创建项目可以利用上一节文章的项目来测试），首先我们需要安装 craco，然后在项目根目录创建一个 craco.config.js 文件，然后在这个文件中进行配置，这里我将主题色改为绿色：

npm install @craco/craco

修改启动命令，在 package.json 文件中修改启动命令：

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

为什么要修改启动命令呢？原因很简单，如果不修改这些指令的话默认情况下会通过 react-scripts 来启动项目，通过 react-scripts 编译项目，通过 react-scripts 测试项目，如果通过 react-scripts 去启动编译测试项目他只会，读取隐藏的 webpack 配置文件。

不会去读取我们额外新增的配置文件，不会把我们额外新增的配置文件中的内容和隐藏的 webpack 配置文件中的内容进行合并，所以我们需要修改这些指令，让这些指令通过 craco 来启动编译测试项目，这样就可以读取我们额外新增的配置文件了，就会把我们额外新增的配置文件中的内容和隐藏的 webpack 配置文件中的内容进行合并。

讲清楚了这些，然后在项目的根目录创建一个 craco.config.js 文件，然后在这个文件中进行配置，这里我将主题色改为绿色：

/* craco.config.js */
module.exports = {
  // ...
};

在修改之前官方文档 自定义主题 中有介绍 按照 配置主题 的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量，所以我们需要安装 craco-less：

npm install craco-less

然后在 craco.config.js 文件中引入 craco-less：

/* craco.config.js */

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

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

这里的 modifyVars 就是用来配置主题色的，@primary-color 就是主题色的值，这里我将主题色改为绿色。

配置完毕了是不是？然后运行项目，刷新一下发现没有效果：

这是为什么呢？我们在 craco.config.js 文件中更改的是不是 less 代码，但是我们的项目中引入的是不是 less 代码，我们的项目中引入的是不是 css 代码：

在之前的文章中，查看 Ant Design 官方文档入门的时候有介绍到，Ant Design 有两种引入方式，一种是通过 less 引入，一种是通过 css 引入，我们这里是通过 css 引入的，现在我修改了 less 代码，我们是不是就要使用 less 引入的方式了，所以这里需要更改一下引入方式，将 css 引入方式改为 less 引入方式：

/* App.js */
- import 'antd/dist/antd.css';
+ import 'antd/dist/antd.less';

然后运行项目，刷新一下发现主题色已经改为绿色了：

这里我们就可以根据自己的需求，对 Ant Design 的主题进行定制，让它符合我们自己的主题色。

四. 5.x

• Ant Design 5.0 版本带来了全新的主题定制方案

与之前的 4.x 版本使用的 less 和 CSS 变量不同，5.0 版本引入了更强大的 CSS-in-JS 技术，使得动态主题的能力得到了进一步增强。这意味着你可以更灵活地调整样式，根据需要动态改变主题，为你的应用定制独特的外观。

这不仅限于以下内容，而是包含但不局限于：

1. 支持 动态切换 主题
2. 支持 同时存在多个 主题
3. 支持 针对某个/某些组件 修改主题变量

我这里之前创建项目是采用的 create-react-app，所以主题定制是针对 create-react-app 的，通过 ConfigProvider 进行主题配置。

ConfigProvider 是一个全局化配置的组件，目前支持配置 antd 组件库的国际化文案、开始时间、全局化样式等。

我这里创建了一个全新的 React 项目，可以基于上篇文章创建方式创建，并且自行安装 Ant Design, 其实可以直接将上篇文章的项目拷贝一份改个名字即可：

在之前我们的 App 组件中，我们引入了一个 Button 组件：

这里代码我改变了一下，采用 React.FC 的方式创建组件，React.FC 是 React.FunctionComponent 的简写，是 React 官方推荐的创建组件的方式，因为我采用的是 TypeScript + React 的方式，所以这里采用的是 React.FC 的方式创建组件。

函数式组件在之前 React 基础系列文章中已经介绍过了，这里就不再赘述了，如果不了解的话可以去看看我之前的文章。

然后运行项目，可以看到 Button 组件的样式是默认的蓝色：

这里我们就需要对 Ant Design 的主题进行定制，让它符合我们自己的主题色，例如我们这里就将主题色改为绿色。

这里采用 ConfigProvider 组件进行主题配置，在 App 组件中引入 ConfigProvider 组件：

+ import { ConfigProvider } from 'antd';

然后在 App 组件中将 Button 组件放到 ConfigProvider 组件中：

const App: React.FC = () => (
-    <>
+    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
+    </ConfigProvider>
-    </>
);

这里的 theme 属性就是用来配置主题的，token 属性就是用来配置主题色的，colorPrimary 就是主题色的值，这里我将主题色改为绿色。

关于 token 在官方文档中有介绍：

通过阅读官方文档，说取值类型是 Design Token 那么 Design Token 又是什么呢？Design Token 是一种用于描述设计系统的抽象，它是一种设计语言，用于描述设计系统中的设计原子，例如颜色、字体、间距、阴影等。

然后我紧接着在文档中又搜索 AliasToken，我一下子就悟了：

通过上图中可以看到提供了很多的 Token 名称，例如 boxShadow 就是用来配置元素阴影样式，根据这里不同的 Token 名称，我们就可以对不同的样式进行配置。

然后我将主题色改为绿色，运行项目，可以看到主题色已经改为绿色了：

这里我们就可以根据自己的需求，对 Ant Design 的主题进行定制，让它符合我们自己的主题色。

再来一个，我将 Link Button 也改为绿色，这个好像是文字颜色，再去官方文档找找有没有更改文字颜色的 Token 名称，然后我在文档中搜索了一下没有找到，我利用猜想加编辑工具的提示找到了我想要的 Token 名称：

我输入了 link，然后编辑器就提示了一堆出来我发现有一个 colorLink，我猜测这个就是用来配置 Link Button 文字颜色的，然后我将 Link Button 文字颜色改为绿色：

const App: React.FC = () => (
    <ConfigProvider theme={{
        token: {
            colorPrimary: '#00b96b',
+           colorLink: '#00b96b',
        }
    }}>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
    </ConfigProvider>
);

运行项目，可以看到 Link Button 文字颜色已经改为绿色了：

五、总结

通过本文的学习，您可以掌握以下知识点：

• Ant Design 4.x 版本主题定制
• Ant Design 5.x 版本主题定制
• 可以从中感受到 Ant Design 4.x 与 5.x 版本主题定制的区别以及优劣势
• 很显然 Ant Design 5.x 版本主题定制更加灵活，更加强大，更加推荐使用

六、题外话

🐤如果您觉得本文对您有所帮助，欢迎点赞、收藏或分享，您的支持是我创作的最大动力！欢迎关注我的公众号 杨不易呀，我会不定期分享更多有价值的内容

这篇文章的内容就介绍到这里，期待我们下次的相遇。感谢您花时间阅读，如果有任何问题或想法，欢迎在评论区留言。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！