关于umjs的主题切换实现

最新推荐文章于 2025-03-27 14:20:59 发布

千击万磨还坚劲，任尔东西南北风

最新推荐文章于 2025-03-27 14:20:59 发布

阅读量496

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_73917015/article/details/140250989

版权

注意本文写作日期2024年7月7日，我目前是最新版本的
注意：该功能仅 antd v5 可用

最后目标实现
在这里插入图片描述

先说一下，umijs布局默认是内置@ant-design/pro-layout布局写的
看一下官网ProLayout - 高级布局和布局与菜单

直接在app.tsx加入以下，umijs会读取对应信息配置到ProLayout

...
export const layout = () => {
  return {
    logo: logo,
    rightContentRender: () => <RightContentRender />,
    menu: {
      locale: false,
    },
  };
};
...

在创建RightContentRender 组件

import { Layout, Space, theme, Switch } from 'antd';
import {useAntdConfigSetter } from 'umi';
const { darkAlgorithm, defaultAlgorithm } = theme;

export default function Page() {
  const setAntdConfig = useAntdConfigSetter();
  // const antdConfig = useAntdConfig();
  return (
    <Layout>
      <Space>
        切换主题
        <Switch
          onChange={(data) => {
            // 此配置会与原配置深合并
            setAntdConfig({
              theme: {
                algorithm: [
                  data ? darkAlgorithm : defaultAlgorithm,
                ],
              },
            });
          }}
        ></Switch>
      </Space>
    </Layout>
  );
}

同时还要允许运行时修改配置

在你自己创建了config.ts文件或默认文件.umirc.ts里面加入

 antd: {
    // compact: true,紧凑主题
    configProvider: {}
  },

在这里插入图片描述
参考Umijs