title: Material-UI. Invalid hook call
body: <p>I've been following some examples on how to setup Material-UI with React.
  Whatever I try, I'm getting back the following error:</p>
  
  <blockquote>
    <p>Error: Minified React error #321; visit
    <a href="https://reactjs.org/docs/error-decoder.html?invariant=321" rel="nofollow noreferrer">https://reactjs.org/docs/error-decoder.html?invariant=321</a> for the full
    message or use the non-minified dev environment for full errors and
    additional helpful warnings.</p>
  </blockquote>
  
  <p>This seems to be Hook related, but I can't find any reason why this happens.</p>
  
  <p>The component</p>
  
  <p><strong>Button</strong></p>
  
  <pre><code>import React from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  
  const styles = {
      root: {
          background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
          border: 0,
          borderRadius: 3,
          boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
          color: 'white',
          height: 48,
          padding: '0 30px',
      },
  };
  
  function ButtonComp(props) {
      const { classes } = props;
      return &lt;Button className={classes.root}&gt;Higher-order component&lt;/Button&gt;;
  }
  
  export default withStyles(styles)(ButtonComp);
  
  </code></pre>
  
  <p>Implemented like this</p>
  
  <pre><code>import * as React from 'react';
  
  import ButtonComp from './ButtonComp';
  
  const App = ({ children }) =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;ButtonComp /&gt;
        &lt;main&gt;
          {children}
        &lt;/main&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default (App);
  
  </code></pre>
  
  <p>I'm running on <code>react@16.11.0</code> and <code>@material-ui/core@4.5.1</code>.</p>
  
  <p>What am I missing here? I can't find the problem at all.</p>