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?

CodePudding user response：

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