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 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:
from @mui/material/styles
from @mui/styled-engine