[material-ui] Style separation between 2 versions of Material UI

[sabbin]

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

"@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

    <MuiThemeProvider5 theme={themeV5}>
       <ButtonV5 variant="contaned" color="secondary" />
       <ButtonV6 variant="contaned" color="secondary" />
    </MuiThemeProvider5>

<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

If I try to add a ThemeProvider for the V6 it overrides completely the theme provider of the V5

    <MuiThemeProvider5 theme={themeV5}>
      <MuiThemeProvider6 theme={themeV6}>
       <ButtonV5 variant="contaned" color="secondary" />
       <ButtonV6 variant="contaned" color="secondary" />
      </MuiThemeProvider6>
    </MuiThemeProvider5>

Is there anyway to isolate changes between the 2 theme versions?

[sabbin]

I've tried also a different approach, by using createStyled but it seems I could not make this work either

import { createTheme } from '@mui/material-v6/styles';
import { createStyled } from '@mui/system-v6';

export const theme = createTheme({
  cssVariables: { cssVarPrefix: 'mui6' },
  spacing: 4,
  palette: {
     .....
     secondary: {
        main: '#FF0000'
     }
  }
});

export const styledV6 = createStyled({ defaultTheme: theme });

Then I created a button with this styledV6

import { Button } from '@mui/material-v6';

export const StyledButton = styledV6(Button)(({ theme }) => {
  console.log(theme.palette.secondary.main); // Here should be color from the defaultTheme provided to createStyled, but it's still from V5 theme
 
  return {
    height: 200,
    backgroundColor: theme.palette.secondary.main
  };
});

Shouldn't the theme in the syledV6 be the theme provided to the defaultTheme?

[siriwatknp]

TLDR: I need to support 2 versions of MUI, 5 & 6, in the same project

Are they in a separate page or mixing in the same page? just want to make sure that my suggestion suit your requirement the most.

[sabbin]

Hi @siriwatknp ,

They are in the same page.
One solution would be to wrap the new components with a ThemeProvider but in case we have over 100 components in a page, I'm not sure that it would be optimal.

The best case scenario would be if, somehow, I can isolate all MUI5 components and theme from the MUI6 components and theme.

With createStyled it would be a good solution as I will develop the new components using styled anyway, but as I tried to use defaultTheme it seems it still uses the theme provided by the ThemeProvider.

To give some context, currently our entire design system is implemented with MUI5 and a custom theme, the app is wrapped with a theme provider. On the next iteration we'll switch from theme to styled as we'll need to support multiple versions of the same component... So we can have TextField 1.0 1.1 1.2, each having some visual diffs. Creating isolated components with syled is a good solution for this but the problem is the theme which comes from the nearest ThemeProvider

Eventually we'll get rid of MUI5 theme & components, but until then, we should be able to support both on same pages