Pregunta de novato de MUI 5 sobre ThemeProvider. Mirando la documentación en https://mui.com/customization/theming/ veo varios ejemplos, como el que se proporciona a continuación, donde un componente de material temático personalizado se envuelve con ThemeProvider para aplicar estilos personalizados.
export default function CustomStyles() { return ( <ThemeProvider theme={theme}> <CustomCheckbox defaultChecked /> </ThemeProvider> ); }También he visto ejemplos en los que se usa ThemeProvider en "_app.js" para aplicar estilos de temas personalizados globalmente, como se muestra a continuación.
export default function MyApp(props) { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( <CacheProvider value={emotionCache}> <Head> <title>My page</title> <meta name="viewport" content="initial-scale=1, width=device-width" /> </Head> <ThemeProvider theme={theme}> <Header /> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} <CssBaseline /> <Component {...pageProps} /> </ThemeProvider> </CacheProvider> ); }Estoy realmente confundido sobre cuál de los dos es la mejor práctica, tal vez la respuesta sea ambas. ¿Es seguro decir que, en general, me gustaría poner todos mis estilos de temas globales en mi contenedor ThemeProvider que se aplica a "_app.js", pero para cualquier estilo único o personalizado aplicable a un componente específico, entonces es seguro envolver el componente específico con otro envoltorio ThemeProvider para aplicar el estilo personalizado específico a ese componente? Siento que estoy usando ThemeProvider una y otra vez para componentes personalizados y no se siente bien.
Le sugiero que use ThemeProvider en el nivel superior de una aplicación React una vez, aunque podría ser múltiple y anidado.
Digamos que su aplicación tiene una configuración que puede seleccionar su tema personalizado como 'claro' u 'oscuro'.
En este caso, debe alternar un tema seleccionado, que puede ser de React Context API .
// src/App.js ... import { createTheme, ThemeProvider } from '@mui/material'; const theme = createTheme(themeOption); return ( <ThemeProvider theme={theme}> <Router> <Route>... </Router> </ThemeProvider> ); ...Por favor, eche un vistazo si quiere saber más. Material ui use la paleta de colores primarios según el modo de tema seleccionado