Material-ui: Same class names in css in both development and production?

[mikkopori]

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).
• [x] 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)

1.
2.
3.
4.

Context

Your Environment

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

[oliviertassinari]

@mikkopori I don't understand your problem. What's your workflow?

[mikkopori]

Thank you for your reply.

My workflow is in development flow to run:
./node_modules/.bin/webpack --config webpack.config.js --watch -d --watch-poll

and in production:
./node_modules/.bin/webpack --config webpack.config.js -p

and depending on this Material UI and webpack handle html and css differently. I would like to have them handle these similarily so developing the GUI would be easier.

[mbrookes]

@mikkopori Reading between the lines, I think perhaps you should be in the Overriding with classes section of the documentation.? If so, then perhaps we should link there from the section you were quoting.

[oliviertassinari]

Yeah, something is off with this question. Either use the classes property for overriding the style or use the global CSS option.

[mikkopori]

Okay, thank you for the guidance.

What I mean by the difference between development and production css is this:

So you are happy to design the the elements in development mode, but once you place them in production there appears new css-properties that have to be designed again.

For example the ::before and ::after pseudo-classes.

How could I the same css-properties already visible in development mode?

I do not believe the overriding solves this issue as overriding would happen only after I first see in development mode what needs to be overridden. Now I have to develop in production mode which I do not think is good.

[oliviertassinari]

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

[mikkopori]

This could be it! So I'm not supposed to have for example the jss1 in several different components at the same time? Any tips on where to solve this?

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