Class name generation issue when building a component which is dependent on MUI and when used inside a project which uses MUI

[sreekanthjnayar]

Steps to reproduce

Steps:

1. Build a public or a scoped npm package where MUI is a peer dependency (We are using MUI core 4.12.4)
2. Same class name generated for the public component and as well as a private component within the app which uses this package resulting in the layout breaking.
3. To prevent this from happening we use the StylesProvider with a createGenerateClassName at the public (or scoped) package where we mention a production prefix and a seed. But the immediate children of the StylesProvider is where the createGenerateClassName takes effect and rest of the elements infers the classname based on the configuration setup in the app where this package is used.

Current behavior

Say we have an app which uses MUI and we install a package from npm where the same version of MUI is a peer dependency, the class names collides (same names generated). To avoid this when we use StylesProvider with createGenerateClassName inside the package, immediate children to the StylesProvider is where the config setup for createGenerateClassName is taking effect and rest of the elements is using the class generation defined at the app level.

Expected behavior

We were expecting was that once a StylesProvider with createGenerateClassName is mentioned at a component level, that takes precedence for everything inside that component over what is mentioned at the app level.

Context

We are trying to build and publish a few scoped packages which are distributed across our org via npm teams which gets used in multiple projects (all of those uses the same version of MUI). How should we structure the code when we are building a scoped package published in npm so that the styles of the component and the app in which it gets used doesn't collide.

Your environment

  System:
    OS: macOS 14.1.2
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.234
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @types/react:  17.0.75 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.0 => 17.0.2 
    mui core 4.12.4

Search keywords: createGenerateClassName

[sreekanthjnayar]

If we install MUI as a dependency (instead of peer dependency) in the package we have built, the class name conflict doesn't occur. Still, we are curious to know why having it as a peer dependency gives us a mixed result explained in the original question.

[brijeshb42]

It would be quite helpful if you can create a playable demo on Codesandbox or Stackblitz given the latest supported version right now is v5.

[sreekanthjnayar]

We'll share a reference repo soon @brijeshb42

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