title: how to use useMediaQuery in class component
body: <p>When using functions as components you have the ability to use the <code>useMediaQuery</code> hook from material-ui. However it no where shows you how to use this hook inside a class.</p>
  
  <p>So I did some research and found out you can use it in a class by doing this:</p>
  
  <pre><code>import React from 'react';
  import useMediaQuery from '@material-ui/core/useMediaQuery';
  
  const withMediaQuery = (...args) =&gt; Component =&gt; props =&gt; {
    const mediaQuery = useMediaQuery(...args);
    return &lt;Component mediaQuery={mediaQuery} {...props} /&gt;;
  };
  
  export default withMediaQuery;
  </code></pre>
  
  <p>However when adding it to the class like this:</p>
  
  <pre><code>export default withStyles(styles)(withMediaQuery(Main));
  </code></pre>
  
  <p>It gives me this error:</p>
  
  <pre><code>index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of &lt;Component /&gt; from render. Or maybe you meant to call this function rather than return it.
  </code></pre>
  
  <p>I really need to use the media query because some variables are dependent on them. This is the render method of the class which I would like to use the media query for.</p>
  
  <pre><code>render() {
  
      const { classes, children } = this.props;
  
      const isDesktop = useMediaQuery(theme =&gt; theme.breakpoints.up('lg'), {
        defaultMatches: true,
      });
  
      const shouldOpenSidebar = isDesktop ? true : this.state.openSidebar;
  
      return (
        &lt;div
          className={cc({
            [classes.root]: true,
            [classes.shiftContent]: isDesktop,
          })}&gt;
          &lt;Topbar
            onSidebarOpen={this.handleSidebarOpen}
          /&gt;
          &lt;Sidebar
            onClose={this.handleSidebarClose}
            open={shouldOpenSidebar}
            variant={isDesktop ? 'persistent' : 'temporary'}
          /&gt;
          &lt;main className={classes.content}&gt;
            {children}
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>I've already tried wrapping the component, but then I wouldn't be able to use the variables</p>