Material-ui: Duplicate JSS classes generated in production

[knro]

Using Madeno Material-UI notifications to display notifications in my app. During development there were never any issues with that. When the notification is triggered, the DOM JSS classes in gets injected accordingly, and then later removed when the notification is dismissed.

Under production, when the notification is triggered, the injected JSS classes (i.e. .jss###) have counters already used in for other elements, causing weird corruption and artifacts (shown below).

• [X] This is a v1.x issue (v0.x is no longer maintained).
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

This is a GIF of the expected behavior on development machine. Notice the notification is displayed fine and the rest of the UI is OK.

Current Behavior

Under production (NODE_ENV=production), duplicate jss classes are injected in the DOM resulting in a mess:

Steps to Reproduce (for bugs)

1. Go to https://live.stellarmate.com
2. Insert any username/password and click login
3. Notification is triggered and GUI is messed up

Context

After investigating the vDOM for the two cases above, the difference is this:

In the development version, when the notification is triggered, new jss### numbers are increased properly as not with overlap with existing styles. For example, this style gets added to with .jss583:

<style type="text/css" data-jss="" data-meta="MuiButtonBase">
.jss583 {
  color: inherit;
  cursor: pointer;
  margin: 0;
  border: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  user-select: none;
  align-items: center;
  border-radius: 0;
  vertical-align: middle;
  justify-content: center;
  -moz-appearance: none;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.jss583::-moz-focus-inner {
  border-style: none;
}
.jss583.jss584 {
  cursor: default;
  pointer-events: none;
}
</style>

Under production, the exact JSS### above is added is .jss289 which already exists in the vDOM before the notification for another element.

Pre-notification:

.jss289 {
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.625rem;
}

Post-notification (above still exists in the vDOM):

<style type="text/css" data-jss="" data-meta="MuiButtonBase">
.jss289 {
  color: inherit;
  cursor: pointer;
  margin: 0;
  border: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  user-select: none;
  align-items: center;
  border-radius: 0;
  vertical-align: middle;
  justify-content: center;
  -moz-appearance: none;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.jss289::-moz-focus-inner {
  border-style: none;
}
.jss289.jss290 {
  cursor: default;
  pointer-events: none;
}
</style>

Your Environment

material-ui/core: 1.2.1,
material-ui/icons: 1.1.0,
material-ui/lab: 1.0.0-alpha.5,
react: 16.4.0,
react-dom: 16.4.0,
madeno: git+https://github.com/knro/madeno.git,
Chrome Version 67.0.3396.79 on Linux

[oliviertassinari]

@knro Looking at your error, this part of the documentation should help. https://material-ui.com/getting-started/faq/#how-to-fix-a-class-names-production-build-conflict-. I'm going to add more detail.

[knro]

More details on how to fix this would be greatly appreciated! It was driving me insane!

EDIT: The documentation helped me fix he issue. I added the following:

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: false,
    productionPrefix: 'c',
});

Then I wrapped my App with <JssProvider generateClassName={generateClassName}>

Afterward, it worked like a charm! Thanks!!

[oliviertassinari]

@knro Yes, it's the expected solution. Thanks for sharing it!

[oliviertassinari]

⚠️ But this might hide something else.

[rafaelkillua]

I love you, Sir.

[igorkrup]

If anybody is seeing this in 2019 and use marterial-ui v4.
As API has changed a bit. That fixed my issue:

import { StylesProvider, createGenerateClassName } from '@material-ui/styles';

const generateClassName = createGenerateClassName({
  productionPrefix: 'c',
  disableGlobal: true
});

Then you wrap your app with:

<StylesProvider generateClassName={generateClassName}>
 ...
</StylesProvider>

[Lekha30]

I don't see this working either. The styles are still different in the production build.