makeSyles css injection order difference between dev and prod #6529
Comments
|
Hi, and thanks for your report. I think your main assumption is wrong:
According to material-ui's styling documentation, the order is different:
So I think there is no material-ui or react-admin bug in your situation - just a misunderstanding of the injection rules. As for having different styles in development and production, this is a recurrent problem with material-ui (see e.g. #1782). Our recommendation is to make sure you don't have duplicate instances of material-ui packages in your lock files, wipe and reinstall dependencies with a clean resolution. |
|
i had a similar issue with styles not applied in the past; the issue was a circular dependency in my import statements See #4370 for an issue i related in react-admin; however it was fully resolved at mui/material-ui#19489 |
|
Hi all, After further investigation, the bug is neither from material-ui nor react-admin. I also double checked there are no duplicate instances of material-ui. The actual issue is from the optimization/tree-shaking in the webpack config file of create-react-app. webpack/webpack#7094 https://stackoverflow.com/a/62646041 have provided one solution, but it is not applicable in this case, because we cannot add {index: 1} to the already compiled package of react-admin. There are other solutions to wrap the component with such issues under another theme provider to force a customized theme (proposed on stackoverflow), however it does not solve the root cause. |
What you were expecting:
I would expect the style sheets injection between
<head>and</head>would follow the same order in production as in development.The correct order of style sheets should be Material UI(as it appears first it has lowest priority), React Admin, makeStyles created by ourselves to override(has highest priority)
What happened instead:
The style sheets injection order in prod is mixed, which creates a lot of styling issues for my project.
Some of our components display well in the development environment, but got messed up in production.
Although some of the order flip in style sheet may not be noticeable, some will causes issues because of the generated order.
dev:
prod:
Steps to reproduce:
You can also easily reproduce the behavior by going to your demo website https://marmelab.com/react-admin-demo/#/
Right click to inspect element and check the order of style sheets there
It will also look like a mixed order.
Related code:
Inspect element of dev mode in codesandbox below in the iframe and the order is correct:
Other information:
I have searched some related past issues, not sure if they explained clear enough to get it resolved.
#4388 (comment)
#5428 (comment)
Addition Remarks:
Material-UI v5 will deprecate makeStyles, withStyles infavor of styled()
However the same issue may persist if we don't understand the root cause when updating to react admin 4.0 #5933
I think this should be added to 4.0 wishlist because the order of stylesheets really matters
Environment
The text was updated successfully, but these errors were encountered: