CODEWITHSUNDEEP
javascriptreactjswebpackmaterial-uiproduction
Димитър Десков
Димитър Десков

Reputation: 33

Material UI / Webpack / React - the className optimization/minification in production mode

webpack - v4+
material ui - v4.9.6
react - v16.12.0

In a normal way all classes should be as the last one from the first example. In some reason on production mode, many of the classes do not change. Any idea?

Example 1:

<div class="MuiDrawer-root MuiDrawer-docked jss408"></div>

Example 2: 

<div class="MuiPaper-root jss469 MuiPaper-elevation1 MuiPaper-rounded"></div>

Upvotes: 3

Views: 1424

Answers (1)

keikai
keikai

Reputation: 15146

styles className is not designed as deterministic in prod mode.

But the generated class names of the @material-ui/core components behave differently. When the following conditions are met, the class names are deterministic:

  • Only one theme provider is used (No theme nesting)
  • The style sheet has a name that starts with Mui (all Material-UI components).
  • The disableGlobal option of the class name generator is false (the default).

Refer:

Upvotes: 3

Related Questions