React Material UI: Appbar gave TypeError: Cannot read properties of undefined (reading '100')

Question

I am making a multi step form for which I was using Material UI component. But the moment I import it, it shows error. The code is:

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

Now the error looks like this: `

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 | };

I have no idea what that means. It would be great help if someone could answer. Thank you in advance.

Answer 1

Based on MUI documents:

If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application.

So theme property in ThemeProvider component is required. You should inject a theme to it:

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 />;
}