注意本文写作日期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