Здравствуйте!
Подскажите, пожалуйста, почему после нажатия на кнопку не происходит смена цветовой темы?
import {createContext, FC, useEffect} from "react";
import ThemeProvider, {useTheme} from "./components/useContext/ThemeContext";
const UseContextRefactoringExample:FC = ()=>{
const [darkTheme, toggleTheme] = useTheme()
useEffect(()=>{
console.log("Theme Updated!")
},[darkTheme])
return (
<>
<ThemeProvider>
<button onClick={toggleTheme}>Toggle Theme</button>
<div style={{'backgroundColor': darkTheme ? "black":"white", 'color': darkTheme ? 'white':'black'}}>Text</div>
</ThemeProvider>
</>
);
}
export default UseContextRefactoringExample;
import {createContext, FC, ReactNode, useContext, useState} from "react";
export const ThemeContext = createContext< [boolean, ()=>void]>([true, ()=> {}])
const ThemeProvider:FC<{children: ReactNode}> = ({children})=>{
const [darkTheme, setDarkTheme] = useState(true)
function toggleTheme(){
setDarkTheme(prev =>!prev)
}
return (
<ThemeContext.Provider value={[darkTheme, toggleTheme]}>
{children}
</ThemeContext.Provider>
)
}
export const useTheme = () =>{
return useContext(ThemeContext)
}
export default ThemeProvider;
