title: Material UI: Use theme in React Class Component
body: <p>I am looking for something like ThemeConsumer (which probably doesn't exist). I've React component and I am using <code>withStyles()</code> higher-order component to inject custom styles. It's pretty well described in <a href="https://material-ui.com/customization/components/#1-specific-variation-for-a-one-time-situation" rel="noreferrer">documentation</a> but I didn't find any example which uses theme.</p>
  
  <hr>
  
  <p>I have some base component which contains <strong>ThemeProvider</strong>. It means any of MUI components are being affected by it.</p>
  
  <pre class="lang-js prettyprint-override"><code>const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const theme = getTheme(prefersDarkMode);
  return (
     &lt;ThemeProvider theme={theme}&gt;
        ...
     &lt;/ThemeProvider&gt;
  )
  </code></pre>
  
  <p>I also use some functional components with <code>makeStyles()</code> to create styles with provided theme.</p>
  
  <pre class="lang-js prettyprint-override"><code>const useStyles = makeStyles(theme =&gt; ({
     // here I can use theme provided by ThemeProvider
  });
  </code></pre>
  
  <p>But <strong>it can't be used in class components</strong>. So I am using <code>withStyles()</code> HOC.</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = {
     // I would like to use here provided theme too
  }
  export default withStyles(styles)(SomeComponent);
  </code></pre>
  
  <hr>
  
  <p><strong>Summary of my question:</strong><br>
  How do I use <strong>provided theme</strong> in class component?   </p>