CODEWITHSUNDEEP
reactjstypescriptmaterial-ui.d.ts
Tim DiRusso
Tim DiRusso

Reputation: 13

TypeScript global.d.ts module declaration is overriding entire @mui/material module when trying to fix theming issue

This issue stems from trying to set the main property on MUIs palette (themeConfig.palette.primary.main = brandColor). This produces the following error:

Property 'main' does not exist on type 'PaletteColorOptions'.
Property 'main' does not exist on type 'Partial<Color>'.

I understand why this is happening: theme is of type ThemeOptions, and going down the chain, MUI defines primary either as SimplePaletteColorOptions | ColorPartial, and ColorPartial does not have a property called main.

In order to try to resolve this, i created a global.d.ts file at the root of my src folder, and added the following code to augment the @mui/material module and add the missing property:

global.d.ts

 declare module '@mui/material' {
   interface Color {
     main?: string;
   }
 }

Doing this resolves the error, but produces errors on every line where I am importing from @mui/material, for example:

Module '"@mui/material"' has no exported member 'ThemeOptions'.

So it seems like the global.d.ts file is overwriting the module instead of augmenting/extending it?

I also have tried moving the module declaration to inside of the theme file (but after @mui/material imports) and that seems to resolve it entirely, but I don't know why. It feels like a cleaner approach would be having the declaration inside of the global.d.ts file.

Upvotes: 0

Views: 125

Answers (0)

Related Questions