Estoy tratando de que el color de fondo sea azul medianoche y recibo un error:
TypeError: no se pueden leer las propiedades de undefined (leyendo '100')
Después de verificar la sintaxis, no puedo detectar ningún error. Esto parece ser un problema de dependencia que estoy pensando?
Gracias por adelantado
import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; import Toolbar from "@mui/material/Toolbar"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { ThemeProvider, createTheme } from "@mui/system"; const Navbar = () => { const theme = createTheme({ palette: { background: { midnightBlue: "#0A1929" } }, }); return ( <ThemeProvider theme={theme}> <Box sx={{ flexGrow: 1, bgColor: "background.midnightBlue"}}> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> Name </Typography> <Button color="inherit">Link 1</Button> <Button color="inherit">Link 2</Button> <Button color="inherit">Link 3</Button> <Button color="inherit">Link 4</Button> </Toolbar> </AppBar> </Box> </ThemeProvider> ); }; export default Navbar;Así que fui y verifiqué, y su importación es incorrecta, debería ser así
import { ThemeProvider, createTheme } from "@mui/material/styles";Su importación es incorrecta. Debería ser:
import { createTheme, ThemeProvider } from "@mui/material"Sugerencia: a veces, cuando realiza la importación automática, algunos componentes se importan desde "@mui/sistema", lo que genera tales problemas, la mayoría de las veces bastará con el nombre de importación desde "@mui/material".