How to use useTheme hook from Material-UI?

Question

There is an example of use of useTheme hook on Material-UI website: https://material-ui.com/styles/advanced/#theming

And code here:

    import React from 'react';
    import { ThemeProvider, useTheme } from '@material-ui/styles';

    function DeepChild() {
      const theme = useTheme();

      return <span>{`spacing ${theme.spacing}`}</span>;
    }

    function UseTheme() {
      return (
        <ThemeProvider
          theme={{
            spacing: '8px',
          }}
        >
          <DeepChild />
        </ThemeProvider>
      );
    }

    export default UseTheme;

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:

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

function DeepChild() {
  const theme = useTheme();

  return <div className={theme}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        spacing: "40px",
        color: "yellow",
        fontSize: "30px"
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;

My question is how to inject it correctly?

Answer 1

Use it just like any other React hook:

function App() {
  const theme = useTheme<Theme>()
  const space = theme.spacing(1)
  return <p>Space: {space}</p>
}

Note that what you get is the full theme. If you want to get any class name, you should use theme.className but you did not define a className property in your theme example.

What you want to do is probably:

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

function DeepChild() {
  const theme = useTheme();

  return <div className={theme.divClass}> eldfo elo </div>;
}

function App() {
  return (
    <ThemeProvider
      theme={{
        divClass: {
          spacing: "40px",
          color: "yellow",
          fontSize: "30px"
        }
      }}
    >
      <DeepChild />
    </ThemeProvider>
  );
}

export default App;