React Material UI: Appbar gave TypeError: Cannot read properties of undefined (reading '100')
React Material UI: Appbar gave TypeError: Cannot read properties of undefined (reading '100')
我正在使用 Material UI 组件制作一个多步骤表单。但是我导入它的那一刻,它显示错误。
代码是:
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 FormUserDetails
现在错误看起来像这样:
`
TypeError: Cannot read properties of undefined (reading '100')
(anonymous function) C:/Users/edkni/Documents/projects/multi-step
form/state_form/node_modules/@mui/material/AppBar/AppBar.js:40
37 | theme,
38 | ownerState
39 | }) => {
40 | const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
41 | return _extends({
42 | display: 'flex',
43 | flexDirection: 'column',View compiled transformedStyleArg
C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/system/esm/createStyled.js:175
172 | } = _ref2,
173 | other = _objectWithoutPropertiesLoose(_ref2, _excluded3);
174 |
175 | return styleArg(_extends({
176 | theme: isEmpty(themeInput) ? defaultTheme : themeInput
177 | }, other));
178 | };
我不知道那是什么意思。如果有人能回答,那将是很大的帮助。提前谢谢你。
基于 MUI 个文档:
If you wish to customize the theme, you need to use the ThemeProvider
component in order to inject a theme into your application.
所以 theme
属性 in ThemeProvider
组件是必需的。你应该给它注入一个 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 />;
}
我正在使用 Material UI 组件制作一个多步骤表单。但是我导入它的那一刻,它显示错误。 代码是:
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 FormUserDetails
现在错误看起来像这样: `
TypeError: Cannot read properties of undefined (reading '100') (anonymous function) C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/material/AppBar/AppBar.js:40
37 | theme,
38 | ownerState 39 | }) => { 40 | const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; 41 | return _extends({ 42 | display: 'flex', 43 | flexDirection: 'column',View compiled transformedStyleArg C:/Users/edkni/Documents/projects/multi-step form/state_form/node_modules/@mui/system/esm/createStyled.js:175 172 | } = _ref2, 173 | other = _objectWithoutPropertiesLoose(_ref2, _excluded3); 174 | 175 | return styleArg(_extends({ 176 | theme: isEmpty(themeInput) ? defaultTheme : themeInput 177 | }, other)); 178 | };
我不知道那是什么意思。如果有人能回答,那将是很大的帮助。提前谢谢你。
基于 MUI 个文档:
If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application.
所以 theme
属性 in ThemeProvider
组件是必需的。你应该给它注入一个 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 />;
}