Material UI styles broken in production build

[tlvince]

Is this a bug report?

No(?)

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

• material ui
• build
• minify
• jss

Environment

1. node -v: v6.11.3
2. npm -v: 5.4.2
3. npm ls react-scripts: 1.0.7

Then, specify:

1. Operating system: Linux
2. Browser and version: Chrome v61

Steps to Reproduce

1. Include a component that uses Material UI via npm
2. Run npm run build
3. Check build output

Expected Behavior

Styles (of the included component) to match what they look like in development (npm start):

Actual Behavior

Styles are mangled/page layout broken:

Reproducible Demo

https://github.com/tlvince/tlvince-reduced-test-case-material-ui-cra

---

The issue can be worked around by including the component under src (rather than within node_modules). It appears that something in CRA's production build is breaking the layout/mangling the styles.

[Timer]

Ah, this is no good!

Could you please try to figure out what's causing this and put together a pull request to fix this behavior?

A reproducible demo would be useful, too.

[tlvince]

I will continue debugging this. In the meantime, here's a reduced test case: https://github.com/tlvince/tlvince-reduced-test-case-material-ui-cra

[tlvince]

Ah, this appears to be a manifestation of mui/material-ui#8223; see my update here mui/material-ui#8223 (comment). Feel free to close this issue.

[dqhuy78]

@tlvince I have run into the same problem and wonder have you solved it ??

[bugzpodder]

@dqhuy78 please file a new issue.

[AnisDerbel]

same here

[sanzhardanybayev]

The same problem. Haven't you already solved this issue?

[Bambirrar]

same here!

[AnisDerbel]

I ended up to remove material-ui-pickers and that solve the problem

[gaearon]

Going to lock because I saw no evidence this is related to Create React App.
If you believe it is (e.g. this problem doesn't occur in other environments) please file a new issue.