How can I use useTheme in Material UI 5?

Question

I just started using Material UI 5.0.4 (with styled-components), and I wanted to access the theme in a component. I looked online and saw useTheme, so I checked the docs and found it - @mui/styles/useTheme. However, it was the legacy documentation, and @mui/styles does not exist in MUI 5. So, I looked at @mui/system instead, and found the section "Accessing the theme in a component". However, this just points back to the legacy documentation!

After the docs didn't seem to help me, I decided to use Visual Studio Code's "Quick Fix" 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:

• @mui/material/styles/useTheme - Returns the default theme object, no matter what. Looking into the source code, this is literally what it does - it switches to the default theme, and then returns the theme.
• @mui/material/private-theming/useTheme - This just returns null. I feel like I shouldn't be accessing this anyway (it says private-), but I tried it anyway.
• @mui/system/useTheme - 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 palette.mode, and there are no other keys under palette than that. (You can see the whole thing below)

{
    "breakpoints": {
        "keys": ["xs", "sm", "md", "lg", "xl"],
        "values": { "xs": 0, "sm": 600, "md": 900, "lg": 1200, "xl": 1536 },
        "unit": "px"
    },
    "direction": "ltr",
    "components": {},
    "palette": { "mode": "light" },
    "shape": { "borderRadius": 4 }
}

• styled-components/useTheme - Returns undefined.
• @mui/styled-engine-sc/useTheme - Returns undefined. (I have a feeling this is the same thing as styled-components/useTheme.)

Those were all the suggestions that VSCode could give me, apart from things like @mui/system/useTheme vs @mui/system/useTheme/useTheme (which is the same thing). I also tried googling stuff but it would always be really old, like:

• Issue #8958 on GitHub for MUI which references @material-ui/core/styles which is v4 and not in v5
• SO question labelled "access the theme from outside material-ui component" which references the legacy docs (@material-ui/styles does not exist anymore, and @mui/material/styles/useTheme does not work as explained above)

Please, if someone knows, how do you get the theme in a component in MUI 5?

Answer 1

It turns out that the correct useTheme is @mui/material/styles/useTheme, and you cannot use useTheme in the same component that you do the ThemeProvider in. For example, this:

const App = () => {
    const theme = useTheme();
    return (
        <ThemeProvider theme={myTheme}>
            <Box bgcolor={theme.palette.background.default} width={100} height={100} />
        </ThemeProvider>
    );
};

Will not work properly. However, this:

const MyComponent = () => {
    const theme = useTheme();
    return <Box bgcolor={theme.palette.background.default} width={100} height={100} />;
};

const App = () => (
    <ThemeProvider theme={myTheme}>
        <MyComponent />
    </ThemeProvider>
)

Will work properly, as useTheme is used in a separate component.

Answer 2

For anybody still struggling with this, I got it working by importing createTheme, ThemeProvider and useTheme all directly from @mui/material...

theme.js:

import { createTheme } from '@mui/material';

export const theme = createTheme({
    ...
});

_app.tsx (I'm using next.js)

import { CssBaseline, ThemeProvider } from '@mui/material';
import type { AppProps } from 'next/app';
import React from 'react';

import { theme } from '../theme';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <React.StrictMode>
            <CssBaseline />
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        </React.StrictMode>
    );
}

export default MyApp;

navigation.tsx (my component with useTheme)

import { Drawer, useTheme } from '@mui/material';
import React from 'react';

const Navigation = (): JSX.Element => {
    const theme = useTheme();

    const drawerSx = {
        '& .MuiDrawer-paper': {
            background: `linear-gradient(to bottom right, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
        },
    };

    return (
        <Drawer sx={drawerSx} variant="permanent">
           ...
        </Drawer>
    );
};

export default Navigation;

I was struggling before I did this, it was only applying the default theme, not the custom one.