Material-ui: TypeError: Object(...) is not a function theme withStyles

[dyarfaradj]

So since upgrading from 3.9.3 to 4.1.0 I've got a issue with the styles, I've read through the documents and the example layout sourcecode but can't get it to work.

I'm getting this error: https://i.imgur.com/Vqc8IPe.png

My current code:

import "date-fns";
import React from "react";
import PropTypes from "prop-types";
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/core/styles";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider, DatePicker } from "material-ui-pickers";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import svLocale from "date-fns/locale/sv";
import AuthService from "../../General/utilFunctions/AuthSerivce";
import {formatDate} from "../../General/utilFunctions/formatDate";

const styles = theme => ({
  grid: {
    margin: 20,
    maxWidth: 700,
  },
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: "85%"
  },
  button: {
    marginright: 100,
  }
})

class MaterialUIPickers extends React.Component {
  constructor(props) {
    super(props);
    this.onSave = this.onSave.bind(this);
    this.state = {
      text: '',
    };
    this.Auth = new AuthService();
  }

  componentDidMount() {
 ...
  }

  handleEndDateChange = date => {
    this.setState({ endDate: date });
  };

  handleStartDateChange = date => {
    this.setState({ startDate: date });
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  onSave = (event) => {
...
  } 

  render() {
    const { classes } = this.props;
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={svLocale}>
        <Grid container className={classes.grid} justify="space-around" spacing={24}>
            <Grid container direction="row" justify="center" alignItems="center">
                <font face="verdana" size="6.5" >Fill in</font>
            </Grid>
          <DatePicker
            margin="normal"
            label="Start date"
            disablePast
            value={this.state.startDate}
            onChange={this.handleStartDateChange}
          />
          <DatePicker
            margin="normal"
            label="End date"
            disablePast
            value={this.state.endDate}
            onChange={this.handleEndDateChange}
          />
          <TextField
            id="outlined-multiline-static"
            label="Reason"
            multiline
            rows="4"
            className={classes.textField}
            margin="normal"
            variant="outlined"
            value={this.state.text}
            onChange={this.handleChange('text')}
        />
          <Grid container direction="row" justify="flex-end">
            <Button onClick={event => this.onSave(event)} variant="contained" color="primary" className={classes.button}>
              Send
            </Button>
          </Grid> 
        </Grid>
      </MuiPickersUtilsProvider>
    );
  }
}

MaterialUIPickers.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MaterialUIPickers);

I read on the documents (https://material-ui.com/styles/basics/#higher-order-component-api) on how to use HOC to get withStyles work, but problem is I want to also use theme.spacing, theme.breakpoint etc... adding theme like I did in 3.9.3 gives me error.

This guy also has the same issue: https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com#comment99267601_56329992

If I turn my class to a function like in the documents, how do I replace the constructor?

[oliviertassinari]

@dyarfaradj The answer in the StackOverflow question is perfect 👌

[dyarfaradj]

@dyarfaradj The answer in the StackOverflow question is perfect 👌

But then again, how do I use theme.spacing, theme.breakpoint? Like the guy asked on stackoverflow..

[oliviertassinari]

@dyarfaradj I don't understand. If it's a bug, please provide a live reproduction.

[oliviertassinari]

Notice: https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles

[iqasim-com]

Make sure your material core and icons are updated to latest version
I had a same issue with this material version
"@material-ui/core": "3.9.2",
"@material-ui/icons": "3.0.2",

Just updated to 4.1.1 and 4.2.0 and it works

"@material-ui/core": "4.1.1",
"@material-ui/icons": "4.2.0",

Below is an example.

https://stackblitz.com/run?file=package.json

[vicortez]

to anyone having this issue, if you are using a class component and a HOC for styles, make sure you are importing withStyles from '@material-ui/core/styles', as it provides a default theme. OP is probably importing from '@material-ui/styles', hence theme is undefined.

https://spectrum.chat/material-ui/help/did-the-4-0-0-alpha-4-release-change-how-withstyles-is-supposed-to-be-used~1b0f17b5-1d89-494f-9575-edff101f29d4

[manglide]

Make sure your material core and icons are updated to latest version
I had a same issue with this material version
"@material-ui/core": "3.9.2", "@material-ui/icons": "3.0.2",

Just updated to 4.1.1 and 4.2.0 and it works

"@material-ui/core": "4.1.1", "@material-ui/icons": "4.2.0",

Below is an example.

https://stackblitz.com/run?file=package.json

This works!!