Estoy usando en el proyecto MUI v5.0.2. Hace una semana mi proyecto funcionó correctamente (no hubo errores), pero hoy apareció un error de la nada (no hubo cambios en el código)
Error: TypeError: Cannot read properties of undefined (reading 'drawer')
El código:
const useStyles = makeStyles((theme) => ({ ... appBar: { zIndex: theme.zIndex.drawer + 1, //this line showed at error message transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }, ... })); También Visual Studio Code dice: Property 'zIndex' does not exist on type 'DefaultTheme'
Intenté esta solución pero no ayudó
Tal vez alguien sepa como solucionarlo?
UPD: Traté de retroceder a las confirmaciones anteriores, pero ocurre el mismo error allí, aunque esto no ha sucedido antes
objeto del tema:
const theme = createTheme({ palette: { primary: { light: '#757ce8', main: '#3f50b5', dark: '#002884', contrastText: '#fff', }, secondary: { light: '#ff7961', main: '#f44336', dark: '#ba000d', contrastText: '#000', }, }, });Tuve un error similar con undefined (reading 'contrastText') Me tomó un tiempo resolverlo, pero este vino de un componente de Chip que usé y el problema fue que usé danger en lugar de error en uno de los <Chip /> componentes y eso arruinó todo el sitio.
Lo peor es que no me dice de donde viene este error
Asegúrese de importarlo desde los paquetes correctos. Hice este error varias veces.
import { makeStyles } from "@mui/styles" Además, asegúrese de que su useStlyes esté envuelto por ThemeProvider . Esos también deben importarse de los paquetes correctos.
import { createTheme, Theme, ThemeProvider } from "@mui/material/styles"No estoy seguro de cuál es la causa raíz, pero este truco funcionó para mí:
import makeStyles from '@mui/styles/makeStyles' import {useTheme} from '@mui/material/styles' const useStyles = () => { const theme = useTheme() const useStylesInner = makeStyles(() => ({ appBar: { zIndex: theme.zIndex.drawer + 1, }, })) return useStylesInner() }