0
137
VistasTematización de MUI v5 con emoción/mui
He actualizado MUI de v4 a v5. Sin embargo, ahora tengo dificultades para entender cómo funciona la tematización con las diferentes soluciones de tematización disponibles. Realmente no entiendo dónde usar los componentes de tematización/estilo de MUI y cuándo usar los de emoción.
En los componentes nuevos, estoy usando el accesorio sx para aplicar estilo, sin embargo, tengo muchos componentes que todavía usan las funciones createStyles / useStyles .
Actualmente tengo la siguiente configuración:
import { ThemeProvider as MuiThemeProvider, Theme, StyledEngineProvider, createTheme, } from "@mui/material/styles"; import { ThemeProvider } from "@emotion/react"; declare module "@mui/material/styles" { interface Theme { mycompany: { primary: string; }; } // allow configuration using `createTheme` interface ThemeOptions { mycompany: { primary: string; }; } } declare module "@mui/styles/defaultTheme" { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface DefaultTheme extends Theme {} } const theme = createTheme({ mycompany: { primary: "#003366", }, }); const App = () => { return ( <StyledEngineProvider injectFirst> <MuiThemeProvider theme={theme}> <ThemeProvider theme={theme}> <Router> ... </Router> </ThemeProvider> </MuiThemeProvider> </StyledEngineProvider> ¿Cómo puedo usar ahora el valor theme.mycompany.primary ? Lo he probado así:
import { useTheme } from "@emotion/react"; const MyComponent = () => { const theme = useTheme(); return ( <Box sx={{backgroundColor: theme.mycompany.primary}}> ... </Box>¿Hay algún ejemplo de proyectos que utilicen la nueva solución de estilo con texto mecanografiado en varios componentes en diferentes archivos?
1 Respuestas
Responde la pregunta0
Desde los documentos , useTheme debe importarse desde @mui/material/styles .
Si usa sx prop, debe poner su código de color personalizado en la paleta de esta manera:
const theme = createTheme({ palette: { mycompany: { primary: "#003366" } }, });Y haga referencia al color en su componente:
<Box sx={{ width: 30, height: 30, bgcolor: "mycompany.primary" }} /> Si usa styled , puede agregar una devolución de llamada donde el theme es una propiedad del primer parámetro:
const MyComponent = styled(Box)(({ theme }) => { return { backgroundColor: theme.palette.mycompany.primary, width: 30, height: 30 }; });Demo en vivo
