Repository: material-ui
Issue: [material-ui] Style separation between 2 versions of Material UI
Labels: support: question,package: system,package: material-ui

Hello,

TLDR: I need to support 2 versions of MUI, 5 & 6, in the same project. The style from MUI-5 theme provider should not apply to the MUI 6 components

Context:
In an App we have he old UI components build on top of MUI 5. We are in the phase which we want to build a new version of our design system and I wanted to create a separate, new,  UI-components library based on MUI 6.

I thought that this way we can create new components without interfering with the old ones

Solution?  & Implementation:

In my original plans I wanted to separate the classname creation for V6 components so in that way whatever styles are defined in the V5 theme provider should be propagated to the V6, since it should have different classNames.


- Added the v6 package 
```json
"@mui/material": "5.15.20",
"@mui/material-v6": "npm:@mui/material@6.3.0",
```
- Modified V6 classname generator
```
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material-v6/className';
ClassNameGenerator.configure((componentName) => `V6-${componentName}`);
```
- In the DOM I can see that they are generated accordingly, `V6-` prefix is added to V6 components

```jsx
    <MuiThemeProvider5 theme={themeV5}>
       <ButtonV5 variant="contaned" color="secondary" />
       <ButtonV6 variant="contaned" color="secondary" />
    </MuiThemeProvider5>
```
```HTML
<div class="MuiBox-root css-1m6ib4c">
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary MuiButton-disableElevation css-88mbw3-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">ASd</button>
<button class="V6-MuiButtonBase-root V6-MuiButton-root V6-MuiButton-contained V6-MuiButton-containedSecondary V6-MuiButton-sizeMedium V6-MuiButton-containedSizeMedium V6-MuiButton-colorSecondary V6-MuiButton-root V6-MuiButton-contained V6-MuiButton-containedSecondary V6-MuiButton-sizeMedium V6-MuiButton-containedSizeMedium V6-MuiButton-colorSecondary css-1jo16jv-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">ASd</button>
</div> 
```

The issue that I have is that the V6 takes the theme styling from the V5 theme provider

![image](https://github.com/user-attachments/assets/27cae3a8-3b86-4a6f-8026-223de2bfd1bf)


If I try to add a `ThemeProvider` for the V6 it overrides completely the theme provider of the `V5`
```jsx
    <MuiThemeProvider5 theme={themeV5}>
      <MuiThemeProvider6 theme={themeV6}>
       <ButtonV5 variant="contaned" color="secondary" />
       <ButtonV6 variant="contaned" color="secondary" />
      </MuiThemeProvider6>
    </MuiThemeProvider5>
```
![image](https://github.com/user-attachments/assets/69b8f7a1-7ac4-4947-920d-99d8c96265e1)


Is there anyway to isolate changes between the 2 theme versions?