material-ui: [system] unstable_classNameGenerator does not support multiple scopes

The solution to the initial question is here https://github.com/mui/material-ui/issues/29856#issuecomment-981855337.

From my perspective:

• @mui/styles (JSS v5) @material-ui/styles (JSS v4): classNameGenerator was introduced to solve a style class names conflict problem. It can also be used to personalize your brand.
• @mui/styled-engine: unstable_classNameGenerator is about personalizing your brand. To work, it needs to be a singleton, that has a called before any of the components are imported. It’s unstable because we are not sure poeple need to customize the brand in the first place.

I see two opportunities for improvements:

1. https://mui.com/material-ui/experimental-api/classname-generator/ move to MUI System. It’s not about Material UI specifically.
2. Document the purpose of the function more clearly.

Lastly, this means that @BiancaArtola will face the issue if you want to migrate JSS (@mui/styles) to emotion | styled-components. cc @oliviertassinari

@siriwatknp I would expect no issues. I believe it’s only a problem with @mui/styles because there are two elements with the .jss21 class name on the DOM. This is because JSS uses a class name counter, so the apps need to be configured so two counters don’t conflict. But with emotion, it’s a hash-based class name, so it only colid if the styles are identical, not if the style rule index is the same (1, 2, 3, … 21, etc.). In any case, a reproduction will tell us this for sure.

@oliviertassinari thanks for pointing this out. This is a note to @BiancaArtola for clarity, @mui/styles v5 is exactly the same engine (JSS) that you are using in v4, however in @mui/material v5 we have changed the default engine from JSS to emotion so the styles generated when you render a component is by emotion (there is a way to change to styled-components).

From what I read in the discussion above, you still need to use @mui/styles for style customization. I hope this helps.

Lastly, this means that @BiancaArtola will face the issue if you want to migrate JSS (@mui/styles) to emotion | styled-components. cc @oliviertassinari

But in v4 I used createGenerateClassName to fix this issue and it’s no longer present

@BiancaArtola You should still be able to import createGenerateClassName from @mui/styles. We only removed it from @mui/material.

@mnajdova Here is my idea to fix this issue.

Problem

Solution

Create react context for ClassName so that it can create a scope for each part of the application and communicate with the components under those trees. The components need to use the hook to get the class name generator function and use it via ownerState.generateClassName. However, the theming part won’t be able to use componentClasses.

createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          [`& .${inputClasses.root}]: { // This does not work with a specific scope
          }
        }
      }
    }
  }
})

Since createTheme can be called anywhere, this is the developer’s responsibility to handle the class name styling.

This is my POC branch: https://github.com/mui-org/material-ui/compare/master...siriwatknp:fix/multi-class-name-gen

const fooGenerator = (componentName) => `foo-${componentName}`;

const barGenerator = (componentName) => `bar-${componentName}`;

function Playground() {
  return (
    <Box sx={{ display: 'flex', gap: 3 }}>
      <ClassNameProvider generator={fooGenerator}>
        <Button variant="contained">Foo</Button>
      </ClassNameProvider>
      <ClassNameProvider generator={barGenerator}>
        <Button variant="contained">Bar</Button>
      </ClassNameProvider>
    </Box>
  );
}

Hi. Thanks for creating the issue. Can you create a codesandbox that directly shows the error? You can fork this template: https://codesandbox.io/s/mui-issue-latest-s2dsx