[theme] How to access theme from ThemeProvider with React class and functional components

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I’m looking to pass my theme into the entire tree, since I’ve defined colors and overridden other defaults. The documentation does not provide an official “blessed” way as far as I can see.

const theme = createTheme({
  palette: {
    primary: {
      main: '#0d346a',
      100: '#d4e3f9',
      200: '#90b8f1',
      500: '#2e507e',
      600: '#203857',
      700: '#152438'
    },
  }, // other overrides 
})

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <MyClassComponent />
      </ThemeProvider>
     )
  }
}

My questions:

1. How do I access the “theme” prop in class components?
2. How do I access the “theme” prop in functional components? The useTheme hook is apparently deprecated.
3. How do I make TypeScript happy?
4. Can the docs be updated to provide examples of the above questions? There is only the example of how to declare the ThemeProvider and use it as a root component: https://mui.com/customization/theming/#themeprovider

Expected behavior 🤔

I would expect to be able to do something like the below:

export class MyClassComponent extends React.Component {
  render() {
    const { theme } = this.props // TypeScript Error: Property 'theme' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)
    return (
      <Box 
        sx={{ backgroundColor: theme.palette.primary[600], px: theme.spacing(1) }}
      />
    )
  }
}

export const MyFunctionComponent = () => {
  const theme = useTheme() // Apparently deprecated, listed under API (Legacy). See legacy doc page: https://mui.com/styles/api/#usetheme-theme
  return (
    <Box 
      sx={{ backgroundColor: theme.palette.primary[600], px: theme.spacing(1) }}
    />
  )
}

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.1
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.10 - /usr/local/opt/yarn/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.75 <-- I generally use Chrome for development 
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.74 
    @mui/icons-material: ^5.5.1 => 5.5.1 
    @mui/lab: ^5.0.0-alpha.76 => 5.0.0-alpha.76 
    @mui/material: ^5.5.3 => 5.5.3 
    @mui/private-theming:  5.6.0 
    @mui/styled-engine:  5.6.0 
    @mui/system:  5.6.0 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.0 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @types/react: ^17.0.20 => 17.0.43 
    react: ^18.0.0 => 18.0.0 
    react-dom: ^18.0.0 => 18.0.0 
    typescript: ^4.4.2 => 4.6.3 

[chrisl777]

@michaldudak Thank you for the reply!

For functional components, I’m glad to know that useTheme is okay to use. You’re right it was confusing as the docs make it seem like useTheme is deprecated. For example, the page on Theming does not mention useTheme at all: https://mui.com/customization/theming/. You have to dig into the legacy or migration guide docs to find it, at least as far as when I search for useTheme in the search at the top of the docs.

For class components, it sounds like I’ll need to create a higher-order component (HOC). It would be great if the docs had an example of that HOC (for TypeScript as well).

The issue I have with TypeScript comes when using class components bringing in the theme. Before, we had the WithTheme interface to denote the theme prop for class components (otherwise TypeScript would complain), like so:

class MyThemedClassComponent extends React.Component<WithTheme> {
  render() {
    const { theme } = this.props 
    return (
      <Box 
        sx={{ backgroundColor: theme.palette.primary[600] }}
      />
    )
  }
}

export default withTheme(MyThemedClassComponent)

Of course, I can copy this pattern for my custom HOC wrapper, but it would be nice if there were a “blessed” way in the docs to explain how to use the theme in class components with an HOC. Now that the WithTheme interface has been removed, it’s not obvious to me the sanctioned approach.

[michaldudak]

Hi @chrisl777. It seems the docs are incomplete. I’ll make sure to correct them. As for your questions:

How do I access the “theme” prop in class components?

@mnajdova please correct me if I’m wrong. AFAIK you have to wrap your class component in a function one and access the theme object via a hook (described below)

How do I access the “theme” prop in functional components? The useTheme hook is apparently deprecated.

The @mui/styles package is deprecated. However, we export useTheme from the @mui/material package. It is a supported and recommended way of accessing the theme. I realize the docs point to this deprecated package and it may be confusing.

How do I make TypeScript happy?

Could you be more specific?