打字稿错误说类型上不存在属性

Question

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>

Answer 1

• @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.

Answer 2

In order to get proper type checks you can extend emotion Theme interface with MUI's.

import { Theme as MuiTheme } from "@mui/material/styles";

declare module '@emotion/react' {
  export interface Theme extends MuiTheme {}
}

As specified in https://emotion.sh/docs/typescript#define-a-theme