Custom Theme / TypeScript Module Augmentation broken when upgrading from 5.8.1 onwards

[TurtIeSocks]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Firstly, thank you so much for the work put into this library. I use it with almost all of my React projects and love Mui <3

Onto the issue...
If I add the declaration into each file that makes use of the extended properties, the TS linter doesn't complain, but if I have the declarations in their own file (works fine with 5.8.1), then it no longer recognizes them as valid.

Small Example:

// theme.ts
      declare module '@mui/material/Button' {
        interface ButtonPropsColorOverrides {
          neutral: true
          red: true
          white: true
          black: true
        }
      }

// Component.tsx
        <Button color="black">
          Close
        </Button>

I can add the actual error in text if you want but it's mostly the usual TS jargon and it sums up with No overload matches this call.

What I've tried:

• Every single version between 5.8.1 and latest
• Importing the components into the file with import '@mui/material/Button where the augmentation lives, per TS Module augmentation for adding variants to components not working #28244
• Cleared out yarn cache / node_modules folder multiple times

Expected behavior 🤔

Extending the theme via module augmentation in an external file is not an issue with 5.8.1 and the linter does not complain.

Steps to reproduce 🕹

Steps:

1. Install latest @mui/material
2. Create a custom theme and module augmentation in one file
3. Make use of the extended theme properties with a component in a different file

Context 🔦

Ideally I'd like to only be able to declare my module augmentations once and have it work throughout my project instead of having to do it in every file that makes use of the extended theme properties.

Thank you!

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.23.0-20220130.1630 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Not Found
    Firefox: 91.7.1
    Safari: 15.3
  npmPackages:
    @emotion/react:  11.9.0 
    @emotion/styled:  11.8.1 
    @mui/base:  5.0.0-alpha.88 
    @mui/icons-material:  5.8.4 
    @mui/material:  5.8.7 
    @mui/private-theming:  5.8.6 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.8.7 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.6 
    @mui/x-data-grid:  5.13.0 
    @types/react:  17.0.45 
    react:  17.0.2 
    react-dom:  17.0.2 
    typescript: ^4.4.3 => 4.6.4 

[mnajdova]

Thanks for the report, #28244 (comment) should help, unless it is really related to specific version where this is broken. If that is the case, it could be related to: #33434

I would propose waiting for the today's release and trying to reproduce considering the comment shared above. If it still happens please create a repository with a reproduction.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[TurtIeSocks]

@mnajdova sorry for the delay, finally had some time to test latest (5.10.0 as of this comment) and was able to get it to work. Not right out of the box but for some reason I had to make some adjustments to the tsconfig files in the monorepo.

Not really clear why it worked previously and broke after updating but all seems good now and my tsconfigs probably follow better practice 😄 If you would like more details about the previous setup to try and reproduce this probably somewhat obscure bug, I can put something together. Either way, thanks for the assistance!

[mnajdova]

If the issue is resolved, I propose we close it. If someone hits something similar they can provide a reproduction and open a new issue. Thanks!

[John-Dennehy]

@TurtIeSocks Can you share what you did in tsconfig?

[fabio-colella-md]

In my case I had misunderstood how to extend the interface, so, if it helps someone:

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true
  }
}

I was thinking it should have been of type string, as that's how you use it when you write color="neutral" 😅

[istvandesign]

Also make sure you actually import and export as modules, if you just use export * from 'x' without importing and exporting you will not export actual modules. This is in case of importing components and the overrides are recognised by your IDE, but not by tsc on build.

[lnhrdt]

@TurtIeSocks to echo @John-Dennehy, can you share what you did in tsconfig? Or any chance your project is open source? I haven't been able to find any good resources or any examples on sharing module augmentation across modules in a monorepo.

[TurtIeSocks]

@lnhrdt It works intermittently for me these days. Every so often it will break and sometime it will work fine. Unfortunately, I don't have a public repo to share but the behavior is inconsistent enough that maybe it's a problem with TS rather than the MUI lib 🤷 I don't have enough free time these days to really deep dive on this since I don't particularly understand the core issue.

[McGern]

Came across this issue tonight and if anyone has any info regarding these things that would be amazing thanks

• can the declarations live in their own file and does the file name matter?
• is there a specific setup required if you are using workspaces?
• is there anything special needed in the tsconfig?

I gave this working for a typography augmentation, and tried the same thing for the palette (trying samples from MUI and also user feedback like this ticket, many different responses) where it works in the ide, but tsc borks. I tried the import module idea, but will give that another shot tomorrow because I might not have done it right.

[lnhrdt]

@McGern since I commented here a few months ago, I found a setup that's been working for our project.

Our project is a monorepo managed with pnpm, using pnpm workspaces. We have a custom MUI theme defined in a module which is used as a dependency in other modules.

I don't know how much of this is particular to our project but here are "tricks" that were necessary for us to get the types to work:

1. Declare the themeAugmentation imports in the files where you override the theme.
   For us, this included import {} from '@mui/lab/themeAugmentation' and import {} from '@mui/x-data-grid/themeAugmentation'.

2. Don't let your IDE get rid of those empty {} in the import statement. My IDE likes to autoformat it away, but they seem to be required for the TypeScript Magic™.

3. Do the module declaration in your module's main export.
   We have the module containing the theme definition setup with a index.ts file as the module's main property. The index exports a theme.ts file containing our actual theme overrides. The TypeScript Magic™ only works for us if we put the declare module statements in the index file. I don't know why this is the case and I suspect it's related to our project's configuration. But maybe you'll need it too.

Good luck. If you learn anything helpful please share back!

[McGern]

@lnhrdt, thanks for getting back so quickly really appreciate it.

I don't know what the heck is going on. I was trying a whole bunch of stuff with rootDir and and tsconfig files (for a slightly different issue), and nothing was working (file location, declaration setup) with the augmentation, and even when I rolled back to what was working when I had less things - I had added a new typography type - it was no longer working.

I rolled back everything including the rootDir changes which includes removing a generated tsconfig build file, and it seemed to work again, so probably something had gotten into the cache which didn't want to play ball. This is the code I was adding, and I was getting various errors in the terminal about "PaletteColor doesn't exist" and "PaletteColorOptions doesn't exist", if I imported the props directly I was then getting an error about unused props in the IDE. After my purge, it seemed to work again.

declare module '@mui/material/styles/createPalette' {
  interface Palette {
    attention: PaletteColor;
  }
  interface PaletteOptions {
    attention?: PaletteColorOptions;
  }
}

// // Extend color prop on components
declare module '@mui/material/Badge' {
  export interface BadgePropsColorOverrides {
    attention: true;
  }
}

I put those declarations into an index.ts file that lower down (higher up?) than the theming and it seems to work (for now), but interestingly enough I didn't seem to need to explicitly import any of the augmentation files that I was using in the module declarations. My base theme has this in it (obvs to create the theme)
import { ThemeOptions, createTheme } from '@mui/material';
But I don't know if that is contributing to not needing the other imports. Bit clueless still when it comes to this stuff.

Not entirely happy with the setup because I would rather have the declarations in a separate file, but I don't know the syntax/setup to get that working.

Thanks again for your time.