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

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 ❤️

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 https://github.com/mui/material-ui/issues/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 

[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" 😅

[John-Dennehy]

@TurtIeSocks Can you share what you did in tsconfig?