Material-UI Rendering Bugs in production / build

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)

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