[Bug or Question] Custom component variants via augmented module is lost when re-export

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

It is kinda impossible to create a live example since it requires a customized MUI theme library.

TL;DR:
Following the official documentation to define the custom variants:
https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

It only works if the definition is being used within the same project. Re-exporting a defined MUI theme will not expose/re-export the custom variants... meaning if I have 10 different projects sharing a custom theme, ALL the declare module will need to be duplicated everywhere and is a maintenance nightmare.

There is a somewhat related issue https://github.com/mui/material-ui/issues/24323, is basically the father of what I am facing right now.

See Context below for long version.

Current behavior 😯

Extending the variants as well as the augmented module does not propagate to consumer apps.

Expected behavior 🤔

Extending the variants or the augmented module should propagate to the consumer apps.

Context 🔦

https://stackoverflow.com/questions/75022165/how-to-re-export-overridden-mui-theme-definitions

Long version:
I have a project that has all the MUI theme created, everything is working properly. Now I'd like to extract the defined theme out as a separate library (ex: @myproject/theme) such that I could share/redeploy it to various applications, that way, when the theme library gets updated, all downstream apps would inherit all the changes as well.

In most cases, it worked fine, however I am having trouble propagating the overridden variants with MUI. For example, I have the following variants defined for the Button:

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    toolbar: true;
  }
}

export const myThemeOptions = {
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'toolbar' },
          style: { ... }
        }
      ]
    }
  }
}

export myLightTheme = createTheme(myThemeOptions, 'light'));

So the above code used to work just fine within the project (before splitting it out as a lib), and VSCode would be able to see the added toolbar variant. However, once the theme is moved to a new project/library (ex: @myproject/theme and then let's say I do, npm install -D @myproject/theme@0.0.1-alpha), it would no longer recognizing the added variants:

Your environment 🌎

Using:

    "@mui/material": "^5.10.13",
    "@mui/styled-engine-sc": "^5.10.6",

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (16) x64 Intel(R) Xeon(R) Silver 4108 CPU @ 1.80GHz
    Memory: 5.50 GB / 15.33 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 14.19.2 - ~/.config/nvm/versions/node/v14.19.2/bin/node
    Yarn: 1.22.18 - ~/.config/nvm/versions/node/v14.19.2/bin/yarn
    npm: 6.14.17 - ~/.config/nvm/versions/node/v14.19.2/bin/npm
  Managers:
    Apt: 2.4.8 - /usr/bin/apt
    Maven: 3.6.3 - /usr/bin/mvn
    pip2: 20.3.4 - ~/.local/bin/pip2
    pip3: 22.0.2 - /usr/bin/pip3
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 11.3.0 - /usr/bin/gcc
    Git: 2.34.1 - /usr/bin/git
  Virtualization:
    Docker: 20.10.12 - /usr/bin/docker
  IDEs:
    Nano: 6.2 - /usr/bin/nano
    VSCode: 1.74.2 - /home/eto/.vscode-server/bin/e8a3071ea4344d9d48ef8a4df2c097372b0c5161/bin/remote-cli/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
    Java: 1.8.0_352 - /usr/bin/javac
    Perl: 5.34.0 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.10.6 - /usr/bin/python3
  Browsers:
    Chrome: 108.0.5359.124
    Chromium: 108.0.5359.124