title: How can I use useTheme in Material UI 5?
body: <p>I just started using Material UI 5.0.4 (with <code>styled-components</code>), and I wanted to access the theme in a component. I looked online and saw <code>useTheme</code>, so I checked the docs and <a href="https://mui.com/styles/advanced/#accessing-the-theme-in-a-component" rel="noreferrer">found it</a> - <code>@mui/styles/useTheme</code>. However, it was the legacy documentation, and <code>@mui/styles</code> does not exist in MUI 5. So, I looked at <code>@mui/system</code> instead, and found <a href="https://mui.com/customization/theming/#accessing-the-theme-in-a-component" rel="noreferrer">the section &quot;Accessing the theme in a component&quot;</a>. However, this just points back to the legacy documentation!</p>
  <p>After the docs didn't seem to help me, I decided to use Visual Studio Code's &quot;Quick Fix&quot; feature, where if you hover over the function, VSCode will give you a list of options to import. Here is the list of options I tried, and why they didn't work:</p>
  <ul>
  <li><code>@mui/material/styles/useTheme</code> - Returns the default theme object, no matter what. Looking into the source code, <a href="https://github.com/mui-org/material-ui/blob/v5.0.4/packages/mui-material/src/styles/useTheme.js" rel="noreferrer">this is literally what it does</a> - it switches to the default theme, and then returns the theme.</li>
  <li><code>@mui/material/private-theming/useTheme</code> - This just returns <code>null</code>. I feel like I shouldn't be accessing this anyway (it says <code>private-</code>), but I tried it anyway.</li>
  <li><code>@mui/system/useTheme</code> - This is what I was hoping would work. However, this is also probably the weirdest one. It gives me the default theme, but it excludes many properties. For example, it only provided <code>palette.mode</code>, and there are no other keys under <code>palette</code> than that. (You can see the whole thing below)</li>
  </ul>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;breakpoints&quot;: {
          &quot;keys&quot;: [&quot;xs&quot;, &quot;sm&quot;, &quot;md&quot;, &quot;lg&quot;, &quot;xl&quot;],
          &quot;values&quot;: { &quot;xs&quot;: 0, &quot;sm&quot;: 600, &quot;md&quot;: 900, &quot;lg&quot;: 1200, &quot;xl&quot;: 1536 },
          &quot;unit&quot;: &quot;px&quot;
      },
      &quot;direction&quot;: &quot;ltr&quot;,
      &quot;components&quot;: {},
      &quot;palette&quot;: { &quot;mode&quot;: &quot;light&quot; },
      &quot;shape&quot;: { &quot;borderRadius&quot;: 4 }
  }
  </code></pre>
  <ul>
  <li><code>styled-components/useTheme</code> - Returns <code>undefined</code>.</li>
  <li><code>@mui/styled-engine-sc/useTheme</code> - Returns <code>undefined</code>. (I have a feeling this is the same thing as <code>styled-components/useTheme</code>.)</li>
  </ul>
  <p>Those were all the suggestions that VSCode could give me, apart from things like <code>@mui/system/useTheme</code> vs <code>@mui/system/useTheme/useTheme</code> (which is the same thing). I also tried googling stuff but it would always be really old, like:</p>
  <ul>
  <li><a href="https://github.com/mui-org/material-ui/issues/8958" rel="noreferrer">Issue #8958 on GitHub for MUI</a> which references <code>@material-ui/core/styles</code> which is v4 and not in v5</li>
  <li><a href="https://stackoverflow.com/questions/47563267/access-the-theme-from-outside-material-ui-component">SO question labelled &quot;access the theme from outside material-ui component&quot;</a> which references the legacy docs (<code>@material-ui/styles</code> does not exist anymore, and <code>@mui/material/styles/useTheme</code> does not work as explained above)</li>
  </ul>
  <p>Please, if someone knows, how do you get the theme in a component in MUI 5?</p>