Estoy usando MUI con mecanografiado. y me sigue saliendo este error
La propiedad 'paleta' no existe en el tipo 'Tema'.ts(2339)
Aquí está el código
const StyledTextField = styled(TextField)(({ theme }) => ({ backgroundColor: theme.palette.primary.main, })); Pero cuando console.log la variable del theme , muestra un objeto con la propiedad de la palette .
{palette:...} ¿Por qué TypeScript muestra este error, cuando el objeto tiene las propiedades? ¿De qué tipo debo hacer la variable de theme para que pase el compilador?
Traté de simular su problema y solo pude obtener este error si importo estilos desde @mui/styles o @mui/ styled @mui/styled-engine .
El estilo debe importarse desde @mui/material/styles , como puede ver aquí . Entonces, el código será como:
import { styled } from "@mui/material/styles";Con respecto a la diferencia de ambas importaciones, según Mui docs:
@mui/estilo-motor:
@mui/styled-engine: un envoltorio delgado alrededor de la API styled() de emoción, con la adición de algunas otras utilidades requeridas, como el componente <GlobalStyles />, los ayudantes css y keyframe, etc. Este es el valor predeterminado.
* Básicamente, no funcionará con otras bibliotecas de @mui , como ThemeProvider .
@mui/material/estilos:
Todos los componentes de MUI están diseñados con esta utilidad styled(). Esta utilidad se basa en el módulo styled() de @mui/styled-engine y proporciona funciones adicionales.
Y styled importado de @mui/material/styles usa el código de styled de @mui/styled-engine como base, implementando funciones y haciendo posible trabajar y manejar con otras bibliotecas de @mui como ThemeProvider y createTheme .
Puede verificar la diferencia de ambas implementaciones a continuación: