从嵌套组件修改MUI主题时App不重渲染 新主题无法注入生效

问题根因 #

• 自定义Hook每次调用都会生成独立的状态实例，你如果在App组件调用一次useThemeBuilder获取主题，又在深层子组件单独调用useThemeBuilder修改状态，两个状态完全隔离，App感知不到状态变化自然不会重渲染。
• 你在App中调用useThemeBuilder时，只解构了theme变量，没有拿到用于更新状态的setMyTheme方法，也没有将修改方法向下传递给子组件，子组件无法修改App内部的主题状态。

解决方案1：通过Props透传修改方法（适合层级较浅的场景） #

步骤1：修改App.js，获取并传递修改方法 #

// App.js中修改如下
function App() {
    // 同时解构主题和修改方法
    const [theme, setMyTheme] = useThemeBuilder();
    console.log('theme from App:', theme)

    return (
        <Router>
            <ThemeProvider theme={theme}>
                <CssBaseline/>
                {/* 将setMyTheme作为props传给MenuBar */}
                <MenuBar setTheme={setMyTheme}/>
                {/* 原有路由代码保持不变 */}
            </ThemeProvider>
        </Router>
    );
}

步骤2：逐层透传修改方法到ThemeControls #

在MenuBar组件中接收setTheme props，再传递给子组件ThemeControls：

// MenuBar组件示例
function MenuBar({ setTheme }) {
  return (
    <div className="menu-bar">
      {/* 其他MenuBar业务代码 */}
      <ThemeControls setTheme={setTheme} />
    </div>
  )
}

步骤3：在ThemeControls中调用修改方法更新主题 #

// ThemeControls组件示例
function ThemeControls({ setTheme }) {
  // 切换暗色模式逻辑
  const handleDarkModeChange = (e) => {
    const isDark = e.target.checked;
    setTheme(prev => ({
      ...prev,
      palette: {
        ...prev.palette,
        type: isDark ? 'dark' : 'light'
      }
    }))
  }

  // 修改主色逻辑，newPrimary为你预设的主色色板对象
  const handlePrimaryColorChange = (newPrimary) => {
    setTheme(prev => ({
      ...prev,
      palette: {
        ...prev.palette,
        primary: newPrimary
      }
    }))
  }

  return (
    <div>
      <Switch onChange={handleDarkModeChange} />
      <Autocomplete options={colorOptions} onChange={(_, val) => handlePrimaryColorChange(val)} />
    </div>
  )
}

解决方案2：通过Context共享状态（避免Props透传，更适合全局主题场景） #

步骤1：封装主题Context #

// 新建components/theme/ThemeContext.js
import { createContext, useContext } from 'react';
import useThemeBuilder from './theme';

const ThemeContext = createContext();

export function ThemeContextProvider({ children }) {
  const [theme, setMyTheme] = useThemeBuilder();
  return (
    <ThemeContext.Provider value={{ theme, setTheme: setMyTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

// 自定义Hook快速获取主题上下文
export const useThemeContext = () => useContext(ThemeContext);

步骤2：修改App.js引入ContextProvider #

import { ThemeContextProvider } from "./components/theme/ThemeContext";

function App() {
  const { theme } = useThemeContext();
  return (
    <ThemeContextProvider>
      <Router>
        <ThemeProvider theme={theme}>
          <CssBaseline/>
          {/* 无需再传递setTheme，MenuBar保持原有写法即可 */}
          <MenuBar/>
          {/* 原有路由代码保持不变 */}
        </ThemeProvider>
      </Router>
    </ThemeContextProvider>
  );
}

步骤3：在ThemeControls中直接调用Context的修改方法 #

import { useThemeContext } from '../theme/ThemeContext';

function ThemeControls() {
  const { setTheme } = useThemeContext();
  // 后续切换暗色模式、修改主色的逻辑和方案1完全一致
}

优化建议 #

可以给useThemeBuilder设置默认初始主题，避免首次渲染时主题配置为空：

const useThemeBuilder = () => {    
    // 填入你默认的主题配置
    const [myTheme, setMyTheme] = useState({
        "palette": {
            "type": "light",
            "primary": {
                "50": "#ffebee",
                "100": "#ffcdd2",
                "200": "#ef9a9a",
                "300": "#e57373",
                "400": "#ef5350",
                "500": "#f44336",
                "600": "#e53935",
                "700": "#d32f2f",
                "800": "#c62828",
                "900": "#b71c1c",
                "A100": "#ff8a80",
                "A200": "#ff5252",
                "A400": "#ff1744",
                "A700": "#d50000"
            }
        }
    })
    const theme = createMuiTheme(myTheme);
    return [theme, setMyTheme]
}

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