title: How to fix 'TypeError: Cannot read property 'style' of undefined' error when using material-ui Transitions
body: <p>I'm trying to use transitions within my react app, but each time I try to use any transition module this error comes up: "TypeError: Cannot read property 'style' of undefined", </p>
  
  <blockquote>
    <p>(anonymous function)
    node_modules/@material-ui/core/esm/Fade/Fade.js:83</p>
  </blockquote>
  
  <pre><code>  80 |     style: _extends({
    81 |       opacity: 0,
    82 |       visibility: state === 'exited' &amp;&amp; !inProp ? 'hidden' : undefined
  &gt; 83 |     }, styles[state], style, children.props.style),
       | ^  84 |     ref: handleRef
    85 |   }, childProps));
    86 | });
  </code></pre>
  
  <p>I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.</p>
  
  <p>I think it has something to do with the styles variable which I define at the top like so:</p>
  
  <pre><code>const styles = theme =&gt; ({
      typography: {
          marginTop: theme.spacing(2)
      }
  });
  
  class IndexPage extends Component {
      constructor(props) {
          super(props);
          this.state = {
              checked: false,
          }
      }
  
      render() {
          const {classes} = this.props;
  
          return (
              &lt;React.Fragment&gt;
                  &lt;Typography className={classes.typography} align={"center"} variant={"h2"} component={"h2"}&gt;
                      &lt;Fade in={this.state.checked}&gt;
                          Welcome to my Portfolio!
                      &lt;/Fade&gt;
                  &lt;/Typography&gt;
              &lt;/React.Fragment&gt;
          )
      }
  }
  
  IndexPage.propTypes = {
      styles: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(IndexPage);
  </code></pre>
  
  <p>I expect the text inside the typography tag to Fade in, but the App crashes.</p>