如何在运行时动态更新Material UI主题的primary和secondary配色

完全支持运行时动态更新主题配色，核心实现思路是将主题配置存入React状态，API请求拿到自定义配色后更新状态，ThemeProvider会自动触发所有消费主题的组件样式重绘。

具体实现步骤 #

1. 在App组件中声明状态存储主题实例，初始值为你预设的默认主题
2. 组件挂载后发起API请求获取客户自定义的primary、secondary配色
3. 拿到配色后重新调用createMuiTheme生成新的主题实例，更新状态即可

修改后的参考代码如下：

import { ThemeProvider, StylesProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core';
import { useState, useEffect } from 'react';

const App = () => {
  // 初始状态用默认预设主题
  const [customTheme, setCustomTheme] = useState(createMuiTheme({
    palette: {
      primary: {
        main: "#fff0c9", 
      },
      secondary: {
        main: '#FF8200',
      }
    }
  }));

  useEffect(() => {
    // 组件加载后调用API获取客户配色
    const fetchCustomTheme = async () => {
      // 这里替换成你的实际API请求逻辑
      const res = await fetch('/api/user-theme');
      const { primaryColor, secondaryColor } = await res.json();
      // 生成新的主题实例更新状态
      const newTheme = createMuiTheme({
        palette: {
          primary: {
            main: primaryColor, 
          },
          secondary: {
            main: secondaryColor,
          }
        }
      });
      setCustomTheme(newTheme);
    };

    fetchCustomTheme();
  }, []);
 
  return(
    <ThemeProvider theme={customTheme}> 
      <div> Component </div>
    </ThemeProvider>
  )
}

注意事项 #

• 必须每次都生成全新的createMuiTheme实例再更新状态，不要直接修改原有主题对象的属性，React浅比较无法识别对象内部属性修改，不会触发重渲染。
• 如果你的项目开启了MUI样式缓存，更新主题后存在样式未刷新的情况，可以给ThemeProvider加上key属性，值为主题的primary+secondary配色拼接值，确保主题变化时整个Provider强制重渲染：

<ThemeProvider key={`${customTheme.palette.primary.main}-${customTheme.palette.secondary.main}`} theme={customTheme}>
  {/* 子组件 */}
</ThemeProvider>

内容的提问来源于stack exchange，提问作者kishorekumaru