Documentation for extending theme is wrong. Module Augmentation does not work.

In https://mui.com/customization/theming/#custom-variables the docs tell you to use following example to extend typescript type but it is not working:

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Current example in docs does not work.

Expected Behavior 🤔

Example should work.

Steps to Reproduce 🕹

Follow the docs.

The following type does work instead:

declare module "@mui/material/styles/createTheme" {
    interface Theme {
        test: string,
    }
    // allow configuration using `createMuiTheme`
    interface ThemeOptions {
        test?: string;
    }
}

Your Environment 🌎

`npx @mui/envinfo`

   System:
    OS: Linux 5.10 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 14.17.5 - /usr/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.24.1 - /usr/bin/npm

[MauricePasternak]

I’ve included a small sandbox that showcases typical use cases:

1. modifying theme to include extra custom properties

2. modifying theme.palette to include extra color codes

https://codesandbox.io/s/romantic-gould-sbkc08

^ Codesandbox errors are the side product of it not playing nicely with declaration files; copy-paste both App.tsx and declaration.d.ts into your local project to see it does, in fact, work. I hope this ends up helping someone down the line.

@mnajdova I think what the MUI docs could still offer to explain is:

• Why should the Theme interface also be extended and not just ThemeOptions. I assume that my sandbox’s commentary approximates the reason.

• Possibly re-organize the example to showcase separate declarations in .d.ts files rather than featuring them together in one .tsx file with the rest of the code. In fairness, the onus is on the users to read up on declarations & module augmentation and adapt accordingly. It is the translation into this other scenario that might be confusing some users when they try to attempt it.

[arawmedia]

Any reason this was closed? I’m finding the docs extremely unclear.