title: How to use useTheme hook from Material-UI?
body: <p>There is an example of use of useTheme hook on Material-UI website: <a href="https://material-ui.com/styles/advanced/#theming" rel="noreferrer">https://material-ui.com/styles/advanced/#theming</a></p>
  
  <p>And code here: </p>
  
  <pre><code>    import React from 'react';
      import { ThemeProvider, useTheme } from '@material-ui/styles';
  
      function DeepChild() {
        const theme = useTheme();
  
        return &lt;span&gt;{`spacing ${theme.spacing}`}&lt;/span&gt;;
      }
  
      function UseTheme() {
        return (
          &lt;ThemeProvider
            theme={{
              spacing: '8px',
            }}
          &gt;
            &lt;DeepChild /&gt;
          &lt;/ThemeProvider&gt;
        );
      }
  
      export default UseTheme;
  </code></pre>
  
  <p>But it doesn't show how to inject the theme. When I try to inject some properties with className it doesn't do anything. Code here: </p>
  
  <pre><code>import React from "react";
  import { ThemeProvider, useTheme } from "@material-ui/styles";
  
  function DeepChild() {
    const theme = useTheme();
  
    return &lt;div className={theme}&gt; eldfo elo &lt;/div&gt;;
  }
  
  function App() {
    return (
      &lt;ThemeProvider
        theme={{
          spacing: "40px",
          color: "yellow",
          fontSize: "30px"
        }}
      &gt;
        &lt;DeepChild /&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>My question is how to inject it correctly?</p>