Material-UI Rendering Bugs in production / build

Question

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:

(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

Answer 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)

Answer 2

I had an issue with Appbar and Navigation drawer of material UI.

The #1 reason this likely happens is due to class name conflicts once your code is in a production bundle.

Accoring to Material UI FAQ (https://material-ui.com/getting-started/faq/), StylesProvider is the way to fix this. It worked for me! Here's what I did-

In my Layout component which has the Appbar, toolbar, navigation drawer, I enclosed the entire rendering code within

import { StylesProvider } from '@material-ui/core/styles';

    return (
        <StylesProvider injectFirst> 
            //rest of my code
            <div></div>
        </StylesProvider>
    );

You can follow the official example at https://material-ui.com/styles/api/#stylesprovider

Using "@material-ui/core": "^4.11.3","react": "^17.0.1",