[material-ui] Two themes customized using TypeScript theme augmentation are conflicting

[anasyo10]

Steps to reproduce

I am using mui v5 and creating a customised theme. I have two different frontend F1 and F2 and seperate theme for each frontend F1_theme and F2_theme both of them are customised using typescript via module augumentation. everything works fine if repo has one theme at a time either F1_theme or F2_theme but when repo has both theme at the time then it picks types on one theme and start validating both themes using that type.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: mui , mui theme , theme augmentation

[ZeeshanTamboli]

It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve.

[kyptov]

@ZeeshanTamboli don`t know why you need something to reproduce. This is how module augmentation works. MUI uses Typescript Declaration Merging and it works great when users merge MUI internal theme and one custom theme. But we can do it twice (or more times). The problem is that Typescript silently merges all themes in one global super theme. Which, of course, totally unwanted.

interface Theme {
  common: string;
}

// theme1.ts
interface Theme {
  theme1: string;
}

const myTheme1: Theme = {
  common: 'common',
  theme1: 'theme1',
};

// theme2.ts
interface Theme {
  theme2: string;
}

const myTheme2: Theme = {
  common: 'common',
  theme2: 'theme2',
};

Monorepo is become more popular nowdays, so this question will appear more often I suppose.

My workaround: do not use module augmentation.

1. I use interfaces for custom Theme, ThemeOptions, Palette,... which extend mui types
2. Create custom theme and give it to ThemeProvider
3. I have useCustomTheme hook which returns my custom theme
4. I reexport styled as CreateMUIStyled
   This solution can fail in runtime, so testing must prevent failing

[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.

[ZeeshanTamboli]

@kyptov, we need reproductions because the issue might stem from another cause, and having them will help us find a solution. Are you suggesting that this is a TypeScript limitation? Unsure what actions can be taken on Material UI's side.