CODEWITHSUNDEEP
reactjswebpackmaterial-ui
Mikroware
Mikroware

Reputation: 344

Production environment breaks material-ui styling

This is a pretty hard question to explain. I am using a fairly basic webpack react + redux + router setup. Within that setup I only use [email protected] as user interface package. On the side there is also some additional scss styling. All packages are up to date.

In a development environment this all works as expected. However when it is compiled with NODE_ENV set to production the styling becomes really weird. I have checked the webpack config difference between production and development, but that did not solve anything. So somewhere in a package the environment somehow seems to break things.

Normal development Normal development

Production environment using <code>import { Grid } from 'material-ui'</code> in the root Production environment using import { Grid } from 'material-ui' in the root

Production environment using <code>import Grid from 'material-ui/es/Grid/Grid'</code> in the root Production environment using import Grid from 'material-ui/es/Grid/Grid' in the root

I honestly have no clue any more why it acts this way. In another project I have [email protected] in production with react-create-app as base, which works all fine. Using beta 22 does also not solve the problem. Neither does downgrading to webpack 3 as used in react-create-app. I cannot seem to find any major differences which could lead to this result.

Would really appreciate if someone could shed some light on possible solutions.

Upvotes: 3

Views: 4035

Answers (3)

ellockie
ellockie

Reputation: 4268

I had a similar issue. It was caused by a different order of stylesheets in dev and prod environments, causing unwanted overwrites. In dev env all stylesheets created by makeStyles() were injected after ALL MUI stylesheets, but in production they were mixed.

Solution:

Add an option: { index: 1 } to all makeStyles() invocations, in order to place those sheets after the MUI sheets which have an index of 0 (by default). This optional argument is passed directly to underlying JSS's jss.createStyleSheet() and dictates the injection order:

const useStyles = makeStyles(
  (...),         //  styles
  { index: 1 },  //  optional argument for JSS, to set position after MUI stylesheets
)

(after: https://stackoverflow.com/a/62646041/624597)

Upvotes: 3

Eltaf Hussain
Eltaf Hussain

Reputation: 3401

One workaround to use, 

import {createGenerateClassName} from 'react-jss'
const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

@kof comment on github on the similiar issue

Upvotes: 2

Mikroware
Mikroware

Reputation: 344

5 hours of attempts before I posted this question and 1 hour after and I finally have figured out the cause. IntelliJ auto imported some material-ui/es parts of the package and those managed to totally break all the styling in production. Either mixing the two import locations or just using the /es import is probably the problem.

For me it is fixed now in production.

Upvotes: 9

Related Questions