¿Alguien puede explicar cómo pasar el tema predeterminado en Material UI5?
en Material UI6 suelo hacerlo así
const useStyles = makeStyles((theme) => ({ home: { display: "flex", paddingTop: "8rem", width: "100vw", height: "100vh", backgroundColor: theme.palette.primary.dark, color: "white", }, }));pero como obtuve los documentos de M-UI5 (hasta donde encontré), no hay una explicación sobre cómo se puede hacer, la única parte que mencionan sobre makeStyle contiene este código en esta página de documentos
+import { makeStyles } from '@mui/styles'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +const theme = createTheme(); const useStyles = makeStyles((theme) => ({ background: theme.palette.primary.main, })); function Component() { const classes = useStyles(); return <div className={classes.root} /> } // In the root of your app function App(props) { - return <Component />; + return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>; }Entonces, ¿supongo que debo ejecutar createTheme () en cada componente para obtener el tema? , disculpa si me perdí algo obvio en los documentos , probablemente porque mi pobre inglés
La parte que falta es de esta parte de la guía de migración: https://mui.com/material-ui/guides/migration-v4/#style-library .
si está utilizando anulaciones de estilo JSS para sus componentes (por ejemplo, anulaciones creadas por makeStyles), deberá cuidar el orden de inyección de CSS. Para hacerlo, debe tener StyledEngineProvider con la opción injectFirst en la parte superior de su árbol de componentes.
Sin esto, los estilos predeterminados para la Card MUI en su componente About de ganan sobre los estilos especificados a través de classes.about . Acerca de dónde se superponen los estilos (por ejemplo, fondo).
Cambiar su componente AllProviders a lo siguiente (simplemente agregando <StyledEngineProvider injectFirst> ) lo soluciona:
import React from "react"; import CountriesProvider from "./countries-context"; import QuestionsProvider from "./questions-context"; import { ThemeProvider, createTheme, StyledEngineProvider } from "@mui/material/styles"; const theme = createTheme(); const AllProviders = (props) => { return ( <StyledEngineProvider injectFirst> <QuestionsProvider> <ThemeProvider theme={theme}> <CountriesProvider>{props.children}</CountriesProvider> </ThemeProvider> </QuestionsProvider> </StyledEngineProvider> ); }; export default AllProviders;https://codesandbox.io/s/funny-flower-w9dzen?file=/src/store/AllProviders.js:303-342
El tema se estaba pasando bien sin este cambio (de lo contrario, habría tenido errores cuando intentaba acceder a partes del tema), pero el orden de inyección de CSS no era correcto.