如何解决为什么当我从另一个组件调用钩子函数时,“主题”在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模式(如果需要)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。