Converting Material UI function to a class : <p>How do I convert a React function to a class? I don't understand how to update <code>const { classes } = props;</code> in a function to class use. Here is a button function from Material UI: <a href="https://material-ui-next.com/demos/buttons/" rel="noreferrer">https://material-ui-next.com/demos/buttons/</a></p>

<pre><code>import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = theme =&gt; ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function RaisedButtons(props) {
  const { classes } = props;
  return (
    &lt;div&gt;
      &lt;Button variant="raised" className={classes.button}&gt;
        Default
      &lt;/Button&gt;
      &lt;Button variant="raised" color="primary" className={classes.button}&gt;
        Primary
      &lt;/Button&gt;
      &lt;Button variant="raised" color="secondary" className={classes.button}&gt;
        Secondary
      &lt;/Button&gt;
      &lt;Button variant="raised" color="secondary" disabled className={classes.button}&gt;
        Disabled
      &lt;/Button&gt;
      &lt;input
        accept="image/*"
        className={classes.input}
        id="raised-button-file"
        multiple
        type="file"
      /&gt;
      &lt;label htmlFor="raised-button-file"&gt;
        &lt;Button variant="raised" component="span" className={classes.button}&gt;
          Upload
        &lt;/Button&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  );
}

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

export default withStyles(styles)(RaisedButtons);
</code></pre>

<p>Here is my conversion to a React class component. It currently gives me an error message of <code>'classes' is not defined  no-undef</code> since I am missing the classes = props part.</p>

<pre><code>import React, { Component } from 'react';
import Button from 'material-ui/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyTheme from './MyTheme';
import './App.css';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';


const styles = theme =&gt; ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});


class App extends Component {
  constructor(props)
  {
    super(props);
  }  

  render() {
    return (
      &lt;MuiThemeProvider theme={MyTheme}&gt;
          &lt;Button variant="raised" &gt;
          Default
          &lt;/Button&gt;
          &lt;Button variant="raised" color="primary" className={classes.button}&gt;
          Primary
          &lt;/Button&gt;
          &lt;Button variant="raised" color="secondary" className={classes.button} &gt;
          Secondary
          &lt;/Button&gt;
          &lt;Button variant="raised" color="secondary" className={classes.button}&gt;
          Disabled
          &lt;/Button&gt;
          &lt;input
              accept="image/*"
              className={classes.input}
              id="raised-button-file"
              multiple
              type="file"
          /&gt;
          &lt;label htmlFor="raised-button-file"&gt;
          &lt;Button variant="raised" component="span" &gt;
            Upload
          &lt;/Button&gt;
          &lt;/label&gt;
      &lt;/MuiThemeProvider&gt;
      );
  }
}

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

export default withStyles(styles)(App);
</code></pre>
