Error in Muithemeprovider

Question

Good evening, I’m facing a problem in a React project. When executing it, I get the following error: "Failed prop type: The prop 'Theme' is marked as required in MuiThemeProvider, but its value is undefined." This mistake is because of the Muithemeprovider I had to put to apply Drawer in my project. I searched several forums and what I could see is that this is an error related to the version of the material-ui, but I could not fix it anyway.

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Drawer from 'material-ui/Drawer';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';

const styles = theme => ({
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  inputProps: {
    step: 300,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
  paper: {
    padding: 50,
    textAlign: 'center',
    border: '5px solid black',
    width: '100%',
  },
  paper1: {
    backgroundColor: 'red',
    marginTop: '13%',
  },
  img: {
    width: '45%',
  },
  appbar: {
    marginLeft: '-20.20%',
    marginTop: '-20%',
    width: '139.99%',
  },
});

function ButtonAppBar(props) {
  const { classes } = props;
  const state = {
    inputs: {},
  };

  const updateInputValue = (evt) => {
    state.inputs[evt.target.name] = evt.target.value;
    console.log(state.inputs);
  };

  const handleSubmit = (event) => {
    // console.log('handleSubmit', username, password);
    if (!event.target.checkValidity()) {
      console.log({ displayErrors: true });
    }
    event.stopPropagation();
    event.preventDefault();
    return 0;
  };
  return (
    <div className={styles.root}>
      <Grid container spacing={8} alignItems="center" justify="center">
        <Paper className={classes.paper}>
        <MuiThemeProvider>
          <AppBar position="static" className={classes.appbar}>
            <Toolbar>
              <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
              <Drawer />
                <MenuIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
        </MuiThemeProvider>
          <img src={img} alt="React" className={classes.img} /><br />
          <form onSubmit={handleSubmit} noValidate>
            <TextField id="email" type="email" label="Usuário" className={classes.user} value={state.inputs.username} onChange={evt => updateInputValue(evt)} /><br />
            <TextField id="password" type="password" label="Senha" className={classes.senha} value={state.inputs.password} onChange={evt => updateInputValue(evt)} />
            <AppBar position="static" className={classes.paper1}>
              <Link to="/Orders">
                <Button type="submit" color="contrast">Login</Button>
              </Link>
            </AppBar>
          </form>
        </Paper>
      </Grid>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

This is my package.json:

Answer 1

The error you mentioned clearly speaks to the problem: you are not providing the prop Theme, required by the component MuiThemeProvider.

Just out of curiosity, you can look at the component source code MuiThemeProvider to setting of prop type check here.

I came across two sites pro material-ui, and the correct one for this question case is this one: https://material-ui-next.com/api/mui-theme-provider/#muithemeprovider

Following this example here, you can create a Theme using createMuiTheme() package 'material-ui/styles':

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
const theme = createMuiTheme();

// ... dentro do seu componente
    <MuiThemeProvider theme={theme}>
      {/* ... */}
    </MuiThemeProvider>