How is possible consume my custom Theme with useTheme() hook?

Question

I have a piece of code when I declare my MuiProvider, like this:

<MuiThemeProvider theme={merge(defaultGlobalTheme, this.props.adjustThemeOptions)}>
    {this.props.children}
</MuiThemeProvider>

How could I consume my custom theme (declared in MuiThemeProvider with @material-ui/[email protected] library) with Material-UI Hooks (declared in @material-ui/[email protected]) or with another solution with Hooks?

EDIT: You can consume with this way:

import { useTheme } from '@material-ui/styles';

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

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

BUT my solution works IF you have components with @material-ui/core in the above version and you are using the @material-ui/styles library.

Thank you in advance.

Best, Fran

Answer 1

There is no hook to consume the context supplied by the MuiThemeProvider, but if you can use the ThemeProvider instead you can use the useTheme hook to consume the theme in a component that is below the provider in the tree.

import { useTheme } from '@material-ui/styles';

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

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