CODEWITHSUNDEEP
reactjsmaterial-ui
user3642173
user3642173

Reputation: 1255

WithStyles not working in Material UI for React

I have an app using Material UI Beta where I try to style a simple component as follows:

import { MuiThemeProvider } from 'material-ui/styles';


const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: 200,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  menu: {
    width: 200,
  },
});



export const CreateJob = (props) => {
  const { classes } = props;
  let confirmDelete = () => {
    const r = window.confirm("Confirm deletion of job");
    return r === true;
  };

  return (
    <MuiThemeProvider>
      <div>
        <form onSubmit={props.isEditting ? props.handleEdit : props.handleSubmit}  noValidate autoComplete="off">
          <h2>Update job details</h2>
          <TextField
            error={props.jobIdError !== ''}
            helperText={props.jobIdError || "Example: ES10"}
            autoFocus
            margin="dense"
            id="jobId"
            label="Job ID"
            name="jobid"
            fullWidth
            onChange={props.handleInputChange('jobId')}
            value={props.jobId} />
         </form>
       </div>
     </MultiThemeProvider>

I then use this in my parent component as follows:

<CreateJob open={this.state.open} />

However, this yields the following error:

TypeError: Cannot read property 'classes' of undefined

Upvotes: 3

Views: 7022

Answers (2)

dariusb
dariusb

Reputation: 105

Sorry I'm kinda late with an answer, but I just found this question while searching for another solution.

I'm going to assume you also imported withStyles.

Firstly, you don't need to export both the simple component and the enhanced one:

export const CreateJob = props => {...} // lose the 'export'
export default withStyles(styles)(CreateJob); // only export here

Secondly, a real problem: <MuiThemeProvider> should be placed around your highest component(usually the <App> component that you render in your entry point file), so you can customize the default theme to your liking for the whole app; see their example here. I'm not sure, but this might even solve your problem, since that should have thrown another error like in this issue.

I just hope this helps someone, but I cannot be sure about what your exact problem is without the complete component file.

Upvotes: 1

eric phung
eric phung

Reputation: 36

this.state is not defined in your code. In the example, state is defined as

    state = {
    name: 'Cat in the Hat',
    age: '',
    multiline: 'Controlled',
    currency: 'EUR',
  };

Upvotes: 2

Related Questions