0
289
VistasReact Material UI: la barra de aplicaciones dio TypeError: no se pueden leer las propiedades de undefined (leyendo '100')
Estoy creando un formulario de varios pasos para el que estaba usando el componente Material UI. Pero en el momento en que lo importo, muestra error. El código es:
import React from 'react'; import { ThemeProvider } from '@mui/material/styles'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; function FormUserDetails({ nextstep, values }) { const proceed = (e) => { e.preventDefault(); nextstep(); } return ( <ThemeProvider> <React.Fragment> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> News </Typography> </Toolbar> </AppBar> </React.Fragment> </ThemeProvider> ) } export default FormUserDetailsAhora el error se ve así: `
TypeError: no se pueden leer las propiedades de undefined (leyendo '100') (función anónima) C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/material/AppBar/AppBar.js:40
37 | tema,
38 | propietarioEstado 39 | }) => {40 | const backgroundColorDefault = theme.palette.mode === 'light' ? tema.paleta.gris[100] : tema.paleta.gris[900]; 41 | return _extends({ 42 | display: 'flex', 43 | flexDirection: 'column',Ver compilado transformStyleArg C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/system/esm/ createStyled.js:175 172 | } = _ref2, 173 | otro = _objectWithoutPropertiesLoose(_ref2, _excluded3); 174 | 175 | return styleArg(_extends({ 176 | theme: isEmpty(themeInput) ? defaultTheme : themeInput 177 | }, other) ); 178 | };
No tengo idea de lo que eso significa. Sería de gran ayuda si alguien pudiera responder. Gracias de antemano.
1 Respuestas
Responde la pregunta0
Basado en documentos MUI :
Si desea personalizar el tema, debe usar el componente ThemeProvider para inyectar un tema en su aplicación.
Por lo tanto, se requiere la propiedad del theme en el componente ThemeProvider . Deberías inyectarle un theme :
import React from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; import Typography from "@mui/material/Typography"; import { orange } from "@mui/material/colors"; function FormUserDetails({ nextstep, values }) { // const proceed = (e) => { // e.preventDefault(); // nextstep(); // }; const theme = createTheme({ palette: { primary: { main: orange[500] } } }); return ( <ThemeProvider theme={theme}> <AppBar position="static"> <Toolbar> <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> News </Typography> </Toolbar> </AppBar> </ThemeProvider> ); } export default function App() { return <FormUserDetails />; } 