createGenerateClassName in Material UI v5

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

What’s the proper alternative to legacy https://mui.com/styles/api/#creategenerateclassname-options-class-name-generator if @mui/styles package is not used, and all styles are created via MUI System (sx)?

By default all classes (even on production) are prefixed with Mui and css which may become a problem if multiple MUI apps are on the same page (Module Federation especially):

Expected behavior 🤔

Documentation is only available for legacy implementation, I’ve scanned the whole site, including migration instructions, and found no docs related to how to do it properly.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/material-ui-issue-latest-s2dsx
2. Check the devtools:

<p class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root">MUI example. Please put the code to reproduce the issue in src/Demo.js</p>

Context 🔦

I need to have 2 (or more) Material-UI based apps (potentially with different versions) on the same page w/o clashing styles.

Your environment 🌎

`npx @mui/envinfo`

@emotion/react latest (11.7.0)
@emotion/styled latest (11.6.0)
@mui/material latest (5.2.2)
react latest (17.0.2)
react-dom latest (17.0.2)

[siriwatknp]

@mnajdova I’ve slightly changed your demo, please take a look. When you’ll get to 5 there should be a generated CSS selector to hide the Badge (like this .css-fvc8ir-RCWBBadge-badge.RCWBBadge-invisible), but there isn’t (there is such selector though .css-fvc8ir-MuiBadge-badge.MuiBadge-invisible).

https://codesandbox.io/s/mui-class-generator-forked-kd9dw?file=/src/Demo.tsx

The issue is fixed, you have to change the import:

-import { unstable_ClassNameGenerator } from '@mui/material/utils';
+import { unstable_ClassNameGenerator } from '@mui/material/className';

https://mui.com/guides/classname-generator/#main-content

[kirill-konshin]

I’ve also found out that there’s an alternative way:

import { CacheProvider } from '@emotion/react';

const stylesCache = createCache({
  key: 'rcwb',
});

// and then
<CacheProvider value={stylesCache}>...</CacheProvider>

Is this legit? Which one is better, this one or via ClassNameGenerator.configure?