问题
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 material-ui@1.0.0-beta.43 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
Production environment using import { Grid } from 'material-ui' 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 material-ui@1.0.0-beta.22 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.
回答1:
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.
回答2:
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
来源：https://stackoverflow.com/questions/50044483/production-environment-breaks-material-ui-styling