Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Material UI styles broken in production build

See original GitHub issue

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

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

Then, specify:

Operating system: Linux
Browser and version: Chrome v61

Steps to Reproduce

Include a component that uses Material UI via npm
Run npm run build
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.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:10 (2 by maintainers)

Top GitHub Comments

1reaction

dqhuy78commented, Jul 16, 2018

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

0reactions

gaearoncommented, Sep 27, 2018

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.

Top Results From Across the Web

Material styling not loading in production build - Stack Overflow

I'm currently working on a project with Nextjs and Material UI. Everything works great in development mode. When ...

Server rendering - Material UI - MUI

In the following recipe, we are going to look at how to set up server-side rendering. The theme. Create a theme that will...

Troubleshooting - Material UI - MUI

There are two reasons why component styles may be broken after you've completed all steps in the migration process. First, check if you...

Frequently Asked Questions - Material UI - MUI

MUI uses the same theme helper for creating all its transitions. ... This may cause theme propagation issues, broken class names, specificity issues, ......

Advanced (LEGACY) - MUI System

⚠️ @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the...