Below is a modified demo code snippet extracted from Material UI documentation:
function ThemeUsage() {
const theme = {
palette: {
primary: {
main: "#000",
},
},
} as const;
type DefaultThemeType = { theme: typeof theme };
const MyThemeComponent = styled("div")(({ theme }: DefaultThemeType) => ({
backgroundColor: theme.palette.primary.main,
}));
return (
<ThemeProvider theme={theme}>
<MyThemeComponent>Styled div with theme</MyThemeComponent>
</ThemeProvider>
);
}
While hovering over the MyThemeComponent element, the TypeScript compiler is indicating the following error:
Property 'theme' is missing in type '{ children: string; }' but required in type 'DefaultThemeType'.
The compiler is expecting the 'theme' prop to be added to the "MyThemeComponent", but in MUI Systems, the theme is passed through the provider and accessible within the styled return function. How can this be communicated to the compiler?
Various types have been experimented with already, including removing the type altogether, but this results in losing type-checking functionality within the Styled-Object.