Material-ui: classnames are not respecting NODE_ENV==='production'

[guybowden]

When using either the SSR example or the CRA example in production mode (npm start production in the SSR example) the SSR output does not contain .jssN class names, it contains the same classnames as non production mode (.Mui*).

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Classnames look like .jssN

Current Behavior 😯

Classnames look like dev mode .Mui*

Steps to Reproduce 🕹

run the SSR example npm run production, view source.
or run the CRA example:

$ npm run build
$ serve ./build

inspect output

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.0 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

This is the desired output.

[guybowden]

Ah. This has changed from 3.9 > 4 then? What was the reason?

[oliviertassinari]

@guybowden The motivation is explained in https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701. It helps styled-components & SASS users. You can restore the v3 behavior with the disableGlobal class name generator option.

[guybowden]

So.. reason I raised this issue was because in the course of upgrading a (server side rendered) app, I changed the ssr code to match the example / docs, except I also needed a custom productionPrefix to stop clashes with a second on-page MUI app.

The new SSR example does not allow for this as the new ServerStyleSheets class masks the additional complexity (yay) of creating StylesProviders etc.

I thought it was not working because initially the styles all looked like non-production. Then on closer inspection, there were some .jssN classes in there.

I have solved my issue by doing the following - it may help others.

import React from "react";
import {
  ServerStyleSheets,
  StylesProvider,
  createGenerateClassName,
} from "@material-ui/styles";
import { SheetsRegistry } from "jss";

export default class CustomServerStyleSheets extends ServerStyleSheets {
  collect(children) {
    // This is needed in order to deduplicate the injection of CSS in the page.
    const sheetsManager = new Map();
    // This is needed in order to inject the critical CSS.
    this.sheetsRegistry = new SheetsRegistry();
    // A new class name generator
    const generateClassName = createGenerateClassName({
      productionPrefix: "MY_PRODUCT_PREFIX",
    });

    return (
      <StylesProvider
        sheetsManager={sheetsManager}
        serverGenerateClassName={generateClassName}
        sheetsRegistry={this.sheetsRegistry}
        {...this.options}
      >
        {children}
      </StylesProvider>
    );
  }
}

I can then use this class in place.

[oliviertassinari]

stop clashes with a second on-page MUI app

We have a seed option in the class name generator for this problem.

[Skaronator]

@guybowden You can pass options to the ServerStyleSheets to overwrite the default serverGenerateClassName prop. This should work without creating a custom class:

const sheets = new ServerStyleSheets({
    serverGenerateClassName: createGenerateClassName({
        disableGlobal: true,
        productionPrefix: 'custom',
      });,
  });