Ant Design中怎么定制动态主题

小编给大家分享一下Ant Design中怎么定制动态主题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！为了方便，本文中示例使用了 create-react-app + caco + craco-less 实现：将 package.json 中的 npm-script 修改一下即可：顺便添加下初始的 craco.config.js：然后，改一下 App.js：然后启动就可以看到如下界面：在 Ant Design 中，有很多种姿势引入主题，下面先来简单的整理一下。1. 引入样式文件直接在 App.js 中引入样式文件：但既然使用了 craco-less 那就使用 Ant Design 的 less 文件吧，但是当你直接引入 antd.less 时，会得到如下错误：解决这个问题很简单，只需要在 lessOption 中将 javascriptEnabled 打开即可：免费云主机、域名然后就可以看到如下界面：当然你也可以选择在 App.less 中引入：2. babel-plugin-import之前的文章中说过如何使用 babel-plugin-import，配合 craco 的使用步骤是一样的，只不过需要在 craco.config.js 中添加对应的配置即可：这样就可以删掉上面在 App.js/App.less 引入的样式了。上面两种方式就是最常用的引入 Ant Design 样式的方式，下面讲基于上面的方式来讲解如何修改覆盖原有样式。其实可以发现在 antd/dist 中提供了很多种样式文件：antd.(dark|compact).less 两个文件分别是黑暗和紧凑模式的样式，而 antd.variable.less 文件则是最新版 Ant Design 才有的文件，它有什么用下面会说到，除了 .less 样式文件之外各位会发现还有几个 xxx-theme.js 文件，如果你打开会发现里面其实都是各个主题的变量值，以 dark-theme.js 为例：如何使用下面会讲，现在就开始本文的主题：实现定制主题和动态主题。1. 定制主题如果你想实现定制主题，那很简单，简单来说就是 样式覆盖，比如使用黑暗主题就直接引入黑暗模式的样式文件，比如在默认主题下想修改主色调一般有两种方式：通过修改样式文件或通过 lessOption。需要说一下，如果同时使用了这两种定制主题的方式，则只会应用第二种通过 modifyVars 设置的内容。如果你问我为啥，那我就额外插一节 less 讲解的课吧Less 小课堂前提：在 App.less 中引入 antd.less 并且覆盖 @primary-color（以上面配置的 green 为例）less 提供了命令行让我们可以通过 Terminal 命令将 .less 文件转义为 CSS：让我们看一下 App.css 中的 primary-color 是什么：可以看到 primary-color 设为 green 生效了，我们再加上 modifyVars 看下呢？在看下生成的 App.css 嘞：Wow～竟然和我们本地开发时一样替换成了 modifyVars 中的内容！这又是为啥呢？我们进入 node_modules/.bin/lessc 文件，在 parseLessFile 中 console 一下 data 和 options 内容会得到源文件字符串和命令行中的一些配置，在此我们会得到：随后我们再进入 node_modules/less/lib/less/render.js 文件，进入 render 方法可以看到：这一步是将 less 转为 AST，让我们来看一下转换后的 AST：这样是不是可以理解了？就是 modifyVars 中的变量覆盖了样式文件中的变量。下课！再回到定制主题的相关内容，现在说下如何使用上面说到的 darkSingleTheme，我们可以看下 theme.js 的内容：可以看到，如果我们在使用 getThemeVariables 时将 dark 或 compact 设为 true 就能应用上对应的样式，我们来试下：就是这么简单，在使用 getThemeVariables 时也可以搭配前面所说的 modifyVars 来覆盖样式。这就是常用的定制主题的方式，就是之前所说的 覆盖变量，总结一下这两种方式：引入主题样式文件并覆盖对应 Less 变量；使用 getThemeVariables 引入对应主题，通过 modifyVars 覆盖变量值；2. 动态主题到现在 Ant Design 文档都没有出切换亮/暗模式的功能，但在文档中却有提到相应功能。在本文中主要介绍3种方式，其中一种就是官方出的 动态主题（实验性）。I. 动态切换样式文件切换样式文件，这应该是最容易想到的一个方案，Ant Design 本来就提供了例如 default/dark/compact 主题的样式，我们只需要将这些文件保存在我们的项目中，按需切换即可，这个方案不赘述，实现起来也十分简单。II. ConfigProviderConfigProvider 是 Ant Design 提供的一个实验性的动态主题方案，使用很简单，在入口 .less 文件中引入 variable.less 文件，然后在 ConfigProvider 中复写对应变量，具体使用如下：默认样式与 primary 一样，然后我们使用 ConfigProvider 修改主题色（还是以 primaryColor 为例）：动态切换我们与上面使用方式一致：这么方便，这么好用，他有什么不足之处么？有，但只要你不介意其实问题不大。通过 ConfigProvider 可以配置的颜色很有限：可以看到，通过这种方式来配置的颜色仅有上面六种，但如果你想 extends Theme 来添加其他字段，那不好意思，行不通，再来看下它是如何处理这几种颜色的：所以他只是对这几种颜色进行了特定处理，而对于其它的颜色（比如组件背景色）等并未作处理，但即使某些颜色的命名方式也符合这种规范，也不会奏效，毕竟 Ant Design 使用了 if (theme.successColor) 这种方式来条件修改这些颜色。III. CSS Variables我打算在这一部分来介绍 II. ConfigProvider 中 antd.variable.less 的内容，因为这个方法与 Ant Design 提供的 ConfigProvider 本质上有些类似：通过 CSS Variables 来修改全局的颜色。我们打开对应文件来简单看下内容：上面的代码中涉及了 less 中几个比较基本的语法：Variable Interpolation 和 Escaping。具体内容可以看上面截图，我就不再赘述，Ant Design 就通过这种方式实现了动态主题，将 color 值设置为可变的 CSS Variables。既然 ConfigProvider 可变的 color 有限，那我们就自己来定义这些颜色吧～这种方式实现起来比较复杂，但是可自定义性就无限可能了看一下通过这种方式实现的效果：如何实现修改 :root 中的样式呢？具体 Ant Design 的实现各位可以看 node_modules/antd/es/config-provider/cssVariable.js 和 node_modules/rc-util/es/Dom/dynamicCSS.js 两个文件，内容十分简单。我先写了一个简易版：changeTheme 方法就是修改 :root 中样式的方法。但为什么不直接在 App.less 中采用 @primary-color: ~'var(--main-color)' 的形式，非要重写组件样式呢？如果你去看 Ant Design 中样式文件的源码你会发现其中用到了很多 function，比如 less 中的 fade 函数：Set the absolute opacity of a color. Can be applied to colors whether they already have an opacity value or not.来自 Less 官网：https://lesscss.org/functions/#color-operations-fade如果我们采用刚才说的那种形式来修改 @primary-color 等样式，less 就会抛出异常：Argument cannot be evaluated to a color：这样就可以看出如果我们传给 fade 函数的不是一个准确的颜色值，在 color.js 中是获取不到 rgb[0] 等值的，所以在 less 编译过程中就会直接报错。以上是“Ant Design中怎么定制动态主题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: 怎么使用Json

本篇内容主要讲解“怎么使用Json”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Json”吧!Json一般用在少量的数据处理。因为格式简单，操作方便，而且javascript本事就支持Json格式的处理功能…