Material-UI Rendering Bugs in production / build

user_10648655 0
Viewed 8520

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

Image01

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

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

react-scripts material-ui reactjs node.js
4 Answers

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

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",

user_93758380

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!!!
user_71939090

According to Material Ui, @mui/styles is deprecated. Instead use inline styling with sx={{ //your style }}

user_73403290
Related