Así que actualmente tengo un estado para alternar el modo oscuro/claro en un sitio web con muchos componentes anidados. Tengo una raíz App.js:

 function App() { return ( <DarkModeProvider> <div className="App"> <HomePage /> </div> </DarkModeProvider> ); }

DarkModeProvider es mi contexto de reacción, y en el siguiente componente tengo un diseño donde tengo mi navegación y enrutamiento, que está envuelto en ThemeProvider:

 const HomePage = () => { const { isDarkTheme } = useContext(DarkModeContext); return ( <ThemeProvider theme={isDarkTheme ? createTheme(darkTheme) : createTheme(lightTheme)}> <DrawerProvider> <Router> <Box sx={{ display: "flex" }}> <Box> <HomePageInner /> </Box> <Routes> <Route path="/inventory" element={<Inventory />} /> <Route path="/orders" element={<Orders />} /> <Route path="/vendors" element={<Vendors />} /> </Routes> </Box> </Router> </DrawerProvider> </ThemeProvider> ); };

Funciona bien, sin embargo, me gustaría acceder al contexto del tema en mi clase de "aplicación" que está en el componente raíz de la aplicación. Si envuelvo DarkModeProvider con ThemeProvider, no tengo acceso al estado del modo oscuro/claro, si envuelvo ThemeProvider con DarkModeProvider, pierdo acceso al estado isDarkTheme desde mi contexto.

¿Hay una mejor práctica para formatear esto? Lo que realmente quiero es tener una hoja de estilo/css en la carpeta de origen al mismo nivel que el componente de la aplicación. No estoy seguro de cómo acceder a mi proveedor de temas cuando no está en el componente de mi aplicación. O cómo tener mi estado de modo oscuro accesible mientras está dentro del proveedor de temas (o viceversa).

Por ejemplo, mi App.CSS:

 body { background-color: theme.primary.palette.main; /* I would like the body to follow my MUI theme. */ } a { color: inherit; text-decoration: none; }

Proveedor de modo oscuro:

 import { createContext, useState } from "react"; const DarkModeContext = createContext(); export const DarkModeProvider = ({ children }) => { const [isDarkTheme, setIsDarkTheme] = useState(false); const changeTheme = () => { setIsDarkTheme(!isDarkTheme); }; return ( <DarkModeContext.Provider value={{ isDarkTheme, changeTheme, }} > {children} </DarkModeContext.Provider> ); }; export default DarkModeContext;