title: Converting Material UI function to a class
body: <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>