Umi4使用预设和自定义Antd主题（React+Umi从零快速搭建中后台系统保姆级记录教程(2)）

前言

篇文篇文章将介绍Uim4自定义Antd主题，包括antd默认主题和自定义主题等。跟着官方文档配置的话会有各种问题，这里可以按我的方式去做就可以。

本系列文章将讲述React+Umi4快速搭建后台管理系统的具体实现步骤。在上一章具体实现了项目从0到1的具体实践步骤。如果你没有项目可以直接从项目地址获取，也可以 git clone https://github.com/XiaoRongwen/umi_backend_template.git直接拉取。如果比较懵逼的话可以去从上一篇文章从0到1实践一下，跟着文档学习会收获很多！！！

💕💕😍👍初心：希望帮助更多像我一样无助且迷茫，想提升自我的小伙伴，同时提升自己，分享自己的学习方法。

教程开始

Ant Design 主题定制

在Umi中有使用antd文档说明，文档说明是带的4.0的antd，但是我们实际安装的是5.4.0。这里影响不大，只是注意一下即可。按照官网的配置，会有一些问题，可以按照我这个配置，运行很丝滑。

使用默认的主题

官方文档这里umijs.org/docs/max/an... 有介绍如何去配置antd默认的主题（暗黑主题）,但是官方文档有坑！！！！按照他的配不出来，跟我一步一步来就解决啦。为了更好的理解，你可以去看看Antd的文档如何自定义主题，它提供了三个默认的主题。

配置antd的默认提供的几个主题

打开umi官网找到antd的使用运行时配置说明。我们复制这个运行时的配置时的代码到app.ts最底部。这个时候有报错！！不要慌~，这个小荣给你们踩坑了。。。。

一个是引入相关的模块，这个自己引入即可。 import { theme } from 'antd';
其次是传入一个空对象，对象中没有对应的属性。

这个空对象从哪里来呢？~折磨了小一会儿，原来这个空对象是config/config.ts下面的antd配置是一个空对象。这个时候我们给这个对象一些配置或者注释掉，这里我默认了给几个空配置，如下仅供参考。这个时候我们回到app.ts他就不会再给我们报错了。

这个时候我们再看看这段代码

js 复制代码

export const antd: RuntimeAntdConfig = (memo) => {
  memo.theme ??= {};
  memo.theme.algorithm = theme.darkAlgorithm; // 配置 antd5 的预设 dark 算法

  memo.appConfig = {
    message: {
      // 配置 message 最大显示数，超过限制时，最早的消息会被自动关闭
      maxCount: 3,
    },
  };

  return memo; /*  */
};

可以看出给我们配置默认提供的暗黑主题。这个时候我们保存运行，看一下结果。如下：

自定义主题/定制主题

学习第一步，看官网umijs.org/docs/max/an... ！！！看不懂没关系~

大概意思就是配置configProvider 和 theme 相当于配置antd的一致，这个时候我们再打开antd的主题官网定制主题 ant.design/docs/react/... 乍一看东西好多。。。。确实好多，听君一席话如废话emmm。。。跟我来操作！看官网下面这个token配置，我们把它复制到我们的app.ts中