为什么当我从另一个组件调用钩子函数时，“主题”在App.js中没有变化

问题描述

我创建了一个挂钩来更改React应用的MUI主题。当我尝试从App.js更改主题时，它工作正常，但是当我在另一个组件中调用函数“ toggleDarkMode”时，我遇到了一个问题：主题对象创建良好，但是新主题不适用于App。 js。

App.js

function App( { t } ) {
  const [ theme,toggleDarkMode ] = useDarkMode();
  const themeObj = createMuiTheme(theme);
  return (
    <ThemeProvider theme={themeObj}>
      <Switch onClick={toggleDarkMode} />
    </ThemeProvider>
    .................

自定义挂钩：

import { useState,useEffect } from 'react'
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { themeObject } from '../../assets/style/theme'
export const useDarkMode = () => {
  const [theme,setTheme] = useState(themeObject(false))
  const [darkMode,setDarkMode] = useState(false)
  const userPrefDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  useEffect(() => {
    doToggleDarkMode();
  },[darkMode])
  useEffect(() => {
    setDarkMode(userPrefDarkMode)
  },[userPrefDarkMode])
  const toggleDarkMode = () => {
    setDarkMode(!darkMode)
  }
  const doToggleDarkMode = () => {
    const updatedTheme = {
      ...theme,palette: {
        ...theme.palette,type: darkMode ? 'dark' : 'light'
      }
    }
    setTheme(updatedTheme)
  }
  return [theme,toggleDarkMode]
}

直到这里一切正常，但是当我尝试从另一个组件更改它时将不起作用

export default function MenuBar(props){
  const [ theme,toggleDarkMode ] = useDarkMode();
  return(
    <Switch onChange={toggleDarkMode}/>
  ..............

* MenuBar不是App.js的直接子组件

解决方法

我认为存在一个在接口元素中使用钩子的概念问题，这很重要。

• 创建自定义主题提供程序，将所有主题值保留在应用程序顶部并更改操作很重要
• 您可以将自定义钩子与来自自定义主题提供程序的上下文一起使用

我创建了这个沙箱来帮助您尝试使用的概念。

https://codesandbox.io/s/change-material-ui-theme-xl8nr?file=/src/App.js

两个主要文件是：

• CustomThemeProvider.js->提供者
• useCustomTheme.js->钩子

他们正在使用createContext和useContext存储state和setState。

我使用的方法仅保存值light或dark，但是您可以更改策略以保存主题的整个JSON模式（如果需要）。