title: Material-UI | Using `theme` in makeStyles
body: <p>I'm trying to take an <code>muiTheme</code>, pass it down to a component via <code>ThemeProvider</code> <em>and</em> to its children, and then use the theme's properties in both of them in a classes object that's created by <code>makeStyles</code>. </p>
  
  <p>Specifically, these are the components/files I have:</p>
  
  <ul>
  <li>component <code>LeftSection</code> | renders <code>Subsection</code> (described below)</li>
  <li><p>muiTheme <code>LefSectionTheme</code> | is used in classes objects in <code>LeftSection</code></p></li>
  <li><p>component <code>RightSection</code> | renders <code>Subsection</code></p></li>
  <li><p>muiTheme <code>RightSectionTheme</code></p></li>
  <li><p>component <code>Subsection</code></p></li>
  </ul>
  
  <p>What I want to do is do add a classes object created by <code>makeStyles()</code> in each of the components, and each of them use the theme's properties. I'm not posting code here because I tried a lot of combinations of the functions and I suppose that I just have a hole in my understanding of how some of those functions work.</p>
  
  <p>So here's a reproduction without any classes: <a href="https://codesandbox.io/s/quizzical-darkness-4uzz3" rel="noreferrer">LeftSection and RightSection rendering Subsection with their themes</a> - to this I want to add classes.</p>
  
  <p>Here is the code of the <code>Subsection</code> component where I want to use classes:</p>
  
  <pre><code>import React from "react";
  import { useTheme } from "@material-ui/styles";
  
  function Subsection(props) {
    const theme = useTheme();
    return (
      &lt;p
        style={{
          color: theme.palette.primary.main
        }}
      &gt;
        test
      &lt;/p&gt;
    );
  }
  
  export default Subsection;
  </code></pre>
  
  <p>How can I do that?</p>