I am using MUI with typescript. And I keep getting this error

Property 'palette' does not exist on type 'Theme'.ts(2339)

Here is the code

const StyledTextField = styled(TextField)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
}));

But when I console.log the theme variable, it displays an object with the paletteproperty.

{palette:...}

Why is typescript showing this error, when the object has the properties? what type should I make the theme variable for the compiler to pass?

I am using MUI with typescript. And I keep getting this error

Property 'palette' does not exist on type 'Theme'.ts(2339)

Here is the code

const StyledTextField = styled(TextField)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
}));

But when I console.log the theme variable, it displays an object with the paletteproperty.

{palette:...}

Why is typescript showing this error, when the object has the properties? what type should I make the theme variable for the compiler to pass?

• javascript
• reactjs
• typescript
• material-ui

2 Answers 2

I tried to simlate your issue and i only could get this error if I import styled from @mui/styles or @mui/styled-engine.

Styled should be import from @mui/material/styles, as you can see here. So, the code will be like:

import { styled } from "@mui/material/styles";

Regarding the difference of the both imports, according to Mui docs:

@mui/styled-engine:

@mui/styled-engine - a thin wrapper around emotion's styled() API, with the addition of few other required utilities, such as the <GlobalStyles /> component, the css and keyframe helpers, etc. This is the default.

* Basically it wont work with other @mui libraries, like ThemeProvider.

@mui/material/styles:

All the MUI components are styled with this styled() utility. This utility is built on top of the styled() module of @mui/styled-engine and provides additional features.

And styled imported from @mui/material/styles use styled code from @mui/styled-engine as base, implementing features and making it possible to work and handle with other @mui librarys such as ThemeProvider and createTheme.

You can check the difference of both implementation below:

1. from @mui/material/styles

2. from @mui/styled-engine

I also got the same error, but I am just using the theme created by createTheme() from @mui/material/styles.

I tried extending the module from @mui/material/styles but it didn't work.

declare module "@mui/material/styles" {
  interface Theme {
    palette: Palette;
  }
}

it seems the module resolution I am using in typescript does not resolve the extend interface correctly from the types module:

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

// shut off automatic exporting for the `BaseTheme` above
export {};

/*** Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
     */

    export interface Theme extends BaseTheme {
      components?: Components<BaseTheme>;
      unstable_sx: (props: SxProps<Theme>) => CSSObject;
      unstable_sxConfig: SxConfig;
    }

So, it is not getting the properties from BaseTheme.

The solution was changing the type from tsconfig file from

"module": "ESNext"

to:

"module": "NodeNext"

weird, but it worked, although it messed up my global path resolution in imports:

@/components/somecomponents

so I decided to leave it with the eslint error