Note! I have managed to mitigate the problem by using "theme: any" in the below declaration but I would prefer a better approach.

I am using React (v17.0.2) for front-end with material-ui (v5.0.0) and I get the following error:

Property 'palette' does not exist on type 'Theme'.

whenever I try to access my theme like so:

import { useTheme } from '@emotion/react';

export default function MyComponent() {

    const theme = useTheme()

    return (
        <Box
            sx={{
                backgroundColor: theme.palette.mode === 'dark' ? 'primary.dark' : 'primary',
            }}
        ></Box>
    );
}

I logged the object with console.log(theme) underneath the declaration, and it logged my theme succesfully. So it is there but I cannot access it like shown above. Here is some of what was logged:

{breakpoints: {…}, direction: 'ltr', components: {…}, palette: {…}, spacing: ƒ, …}
  > breakpoints: {keys: Array(5), ...}
  > components: {MuiTypography: {…}, ...}
  direction: "ltr"
  > mixins: {toolbar: {...}}
  > palette: {mode: 'dark', ...}
  ...

Also, I found the file where the type "Theme" is located and the property "palette" definitely exists. Here is a snippet of the file:

export interface Theme extends SystemTheme {
  mixins: Mixins;
  components?: Components;
  palette: Palette;
  shadows: Shadows;
  transitions: Transitions;
  typography: Typography;
  zIndex: ZIndex;
  unstable_strictMode?: boolean;
}

I also tried importing and using Theme like so:

import { Theme } from '@mui/material/styles';
...
const theme: Theme = useTheme()
...

And this gave me a new error ( underlining the "theme" variable ):

Type 'Theme' is missing the following properties from type 'Theme': mixins, palette, shadows, transitions, and 6 more.

I tried like this too:

import { Theme } from '@mui/material/styles';
...
const theme = useTheme<Theme>()
...

And this gave me a new error ( underlining "Theme" in useTheme<Theme>() )

Expected 0 type arguments, but got 1.

and also

Property 'palette' does not exist on type 'Theme'.

I am new to typescript, so any help is appreciated.

EDIT Got the answer thanks to Alex Wayne (and maybe also windowsill if I initially misunderstood the answer). Here's the code that worked:

import { useTheme, Theme } from '@mui/material';
const theme: Theme = useTheme()
<Box sx={{backgroundColor: theme.palette.mode}}></Box>

CodePudding user response：

• @emotion/react exports a Theme type, returned by useTheme() from the same package.
• @mui/material/styles exports a Theme type, returned by createTheme from the same package.
• These are not the same type.

They have the same name in each package, but are completely unrelated.

This is why this fails:

import { useTheme } from '@emotion/react';
import { Theme } from '@mui/material/styles';
const theme: Theme = useTheme()
// Type 'Theme' is missing the following properties from type 'Theme': mixins, palette, shadows, transitions, and 2 more.(2740)

Playground

But this succeeds.

import { useTheme, Theme } from '@emotion/react';
const theme: Theme = useTheme()

Playground

I don't know exactly which one you intend to use, but here are the docs on emotion themes and here are the docs on Material UI themes. They are separate things, and you need to use each according to their intended use.