关于umjs的主题切换实现

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

最后目标实现

先说一下,umijs布局默认是内置@ant-design/pro-layout布局写的

看一下官网ProLayout - 高级布局布局与菜单

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

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

在创建RightContentRender 组件

jsx 复制代码
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里面加入

js 复制代码
 antd: {
    // compact: true,紧凑主题
    configProvider: {}
  },

参考Umijs

相关推荐
得物技术4 分钟前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun6 分钟前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
薛定谔的算法19 分钟前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
魔云连洲44 分钟前
React中的合成事件
前端·javascript·react.js
唐•苏凯2 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军2 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。2 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴3 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
kymjs张涛3 小时前
零一开源|前沿技术周刊 #15
前端·javascript·面试
古夕3 小时前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js