Same class names in css in both development and production?

Hello,

I have a question regarding the class names used in development and production.

The documentation (https://material-ui.com/customization/css-in-js/#class-names) says:

Instead, you have to use the classes property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production:

development: .MuiAppBar-root-12
production: .jss12
If you don't like this default behavior, you can change it. JSS relies on the concept of class name generator.

How would I get the same behaviour both in development and in production including the html-structure and names for classes easiest? I would be happy to use the short names in development as well for example.

Problem I’m facing is that in development the names and structure is different so as i’m develpoing I always have the check the GUI in both develpoment and production modes (in webpack) which is time consuming and prone to errors.

Thank you for your advice and comments, there probably is something I’m missing here… 😃

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

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Context

Your Environment

Tech	Version
Material-UI	v1.?.?
React
browser
etc

[oliviertassinari]

@mikkopori I’m not sure I can help more than linking: https://material-ui.com/getting-started/faq/#how-to-fix-a-class-names-production-build-conflict-

[oliviertassinari]

@mikkopori It’s hidding something else. You have a class name generator duplication issue.