问题

I have big problems building my react-app.

I am using material-ui/core v.4.10.2 on the normal react-scripts start dev-server everything works perfectly.

But when built and served through Nginx or npm-module serve the rendering is not working correctly...

(I saw similar issues on the material-ui Github, but they were all (falsely) closed

Here is my package.json in case something's wrong with my dependencies (what I certainly don't think is the case)

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/pickers": "^3.2.7",
    "@mui-treasury/styles": "^1.1.0",
    "@trendmicro/react-sidenav": "^0.4.5",
    "browserfs": "^1.4.3",
    "cronstrue": "^1.85.0",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.1.4",
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
    "lodash": "^4.17.15",
    "material-ui-confirm": "^2.0.4",
    "moment": "^2.24.0",
    "react-animated-slider": "^2.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-blur-image-loader": "^0.2.2",
    "react-digital-clock": "^0.1.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-fine-uploader": "^1.1.1",
    "react-i18next": "^10.12.2",
    "react-image-lightbox": "^5.1.1",
    "react-picky-date-time": "^1.3.2",
    "react-router-dynamic-breadcrumbs": "^2.2.0",
    "react-sticky-el": "^2.0.5",
    "recompose": "^0.30.0",
    "store2": "^2.10.0",
    "tubular-react": "^4.1.31",
    "yup": "^0.28.4"
  }
}

Images of a View in Production-Version and Dev-Version

I don't know why, but a few minutes ago I also had the problem that the the header is even smaller as in this image, but I couldn't reproduce that right now... Sometimes it works better, sometimes less, but it's not suitable to get shipped like this sadly.

But in this GIF you see more issues like this: Animation

(In Dev-Mode there is not a single view that is not working...Only happens when building)

What I already tried

Tried updating MUI as well as downgrading it to first 4.0.0 version
Material UI Styles Not Rendering
Gave unique classNames.

Nothing worked...sadly.

I hope that there is anybody that had similar issues. I saw someone opening an issue on MUI's Github, but like I said it's sadly closed

https://github.com/mui-org/material-ui/issues/21502

回答1:

I had the exact same issue. Turned out that Webpack would mess around with Material UI's rules of JSS precedence. You need to manually override the injection order using the index option.

In your makeStyles() or withStyles(), add {index: 1}:

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

回答2:

Thanks @Mordechai for being the day saver.

@antax, the solution even works with theme. It seems u have messed up with the syntax.

makeStyles(theme => ({ /* your styles here */ }), {index: 1});  //WILL WORK!!!

来源：https://stackoverflow.com/questions/62473898/material-ui-rendering-bugs-in-production-build

标签

node.js

reactjs

material-ui

react-scripts

Material-UI Rendering Bugs in production / build