前言
React 和 Ant Design 是目前前端界非常流行的技术，它们分别代表着前端开发和 UI 设计领域的最高水平。React 是 Facebook 出品的一款 JavaScript 库，可用于构建用户界面；Ant Design 是阿里巴巴出品的一套开源的 UI 设计语言和 React 实现库。
Ant Design 中有一项非常有用的功能是支持自定义主题色，开发者可方便地通过自定义主题色来实现定制化的 UI 设计。在这篇文章中，我们将介绍如何在 React+Antd 中实现自定义主题色。
Ant Design 主题色
在 Ant Design 中，主题色指的是指定颜色，主要用于按钮、链接、输入框、进度条、警告框等部件的配色，并且主题色的变化可以体现出不同状态下的UI差异。
Ant Design 提供了一些内置的主题色，例如 “@primary-color”，它是 Ant Design 中最基本的配色方案，所有的组件都会继承它：
@import '~antd/dist/antd.less'; @primary-color: #1890ff;
使用以上代码可以将主题色改为“亮蓝色”，可以根据需求修改颜色值。当我们在项目中使用 Ant Design 时，可以选择是否需要修改主题色。
自定义主题色
在实际的项目中，往往需要自定义主题色来满足需求。Ant Design 提供了更加灵活的方式来实现自定义主题色。
方案一：modifyVars
使用 Ant Design 提供的 modifyVars 技术可通过重写 less 变量的实现自定义主题色。
首先安装 less 和 less-loader：
npm install less less-loader --save-dev
然后，在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
- ------- -------------- --
- ------- ------------ --
- ------- -------------- -------- - ------------------ ----- ----------- - ----------------- --------- - - -
-
--
---
-
-
-以上代码中，modifyVars 是重要的一步，它指定了需要修改的变量以及修改后的值，这里我们将主题色修改为“浅绿色”。
这种方式虽然可以实现自定义主题色，但由于这种方式需要重写整个样式库，会比较耗费时间和计算力，对于小型项目来说较为合适，但对于大型项目需要考虑其他方案。
方案二：modifyVars + babel-plugin-import
Ant Design 提供了一种更优雅的方案——基于 babel-plugin-import 的按需加载。这种方式通过按需加载来减轻样式负担，使得打包后的文件更小、加载速度更快。
首先安装 babel-plugin-import：
npm install babel-plugin-import --save-dev
然后在 .babelrc 中配置：
-- -------------------- ---- -------
-
---------- -
-
----------------------
-
-------------- -------
-------- ----
-
-
-
-在 webpack 配置文件中也需要加上 less-loader，并使用 modifyVars 实现自定义主题色：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- -
- ------- -------------- --
- ------- ------------ --
- ------- -------------- -------- - ------------------ ----- ----------- - ----------------- --------- - - -
-
--
---
-
-
-这个方案与方案一类似，不同的是它是在按需加载的基础上实现的自定义主题色，体现了更好的可维护性和扩展性。
示例代码
下面是一份完整的示例代码，以更好地帮助读者理解如何在 React+Antd 中实现自定义主题色。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------
----- --- ------- --------------- -
-------- -
------ -
-----
------- ---------------------- ---------------
------- ------------- -------- ----------- ------ --------- ---------------
------- ------------- -------- ----------- ------ --------- ---------------
------
-
-
-
------ ------- ----以上代码中，我们引入了 Button 组件，并使用了 Ant Design 内置的主题色“primary”、“dashed”、“danger”。我们可以通过在 webpack 中自定义主题色来替换掉 Ant Design 内置的主题色，实现定制化的 UI 设计。
总结
本文介绍了在 React+Antd 中如何自定义主题色，包括两种实现方案：使用 modifyVars 和按需加载。在实际项目中，我们可以根据项目规模和需求，选择适合自己的方案来实现自定义主题色。Ant Design 的可配置性和灵活性让前端人员可以更高效地进行UI设计和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64faed6cf6b2d6eab31b361d