Webpack production build causes CSS to be injected in different order.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

While running development mode in Webpack, all the CSS is injected as expected with MUI CSS first and our own below so that overrides are handled as expected. When changing to production mode the order is different causing some components custom CSS to appear higher up in the DOM.

Expected Behavior 🤔

Expect injected style tags to appear in the same order regardless of using Webpack´s develop or production mode.

Steps to Reproduce 🕹

Here is an example of a component that we’ve written. It examplifies how we extend MUI components in our own UI-kit:

import React from "react";
import Divider, { DividerProps } from "@material-ui/core/Divider";
import { Theme, makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";

const useStyles = makeStyles<Theme>((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.divider
  }
}));

type OwnProps = {};

const MyDivider: React.FC<OwnProps & DividerProps> = ({
  className,
  variant = "middle",
  ...rest
}) => {
  const classes = useStyles();
  return <Divider className={clsx(classes.root, className)} variant={variant} {...rest} />;
};

export default MyDivider;

Usage example of our custom Divider component:

import React from "react";
import ReactDOM from "react-dom"
import { makeStyles, Theme } from "@material-ui/core/styles";
import { MyDivider } from "./MyDivider";

const useStyles = makeStyles<Theme>((theme: Theme) => ({
  divider: {
      margin: theme.spacing(0, 0, 2, 0)
  }
}));

type OwnProps = {};

const App: React.FC<OwnProps> = ({
   const classes = useStyles();
   return <MyDivider className={classes.divider} />
});
ReactDOM.render(<App />, document.getElementById("app"))

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.7.1
React	v16.12
TypeScript	v3.7.3
Webpack	v4.41.2

[damir-sirola]

We’re having the same issue when using material-ui with gatsby. When doing the production build, the order of styles injected into the head element is crisscrossed. Because of that, the style overrides aren’t applied when the Mui style is later in the head than the override. I came across the following StackOverflow question. Perhaps it would be a good idea to have the default index used in withStyles and makeStyles be greater than the one used for components? Currently, our only option is adding options object with index of 1 to each withStyles and makeStyles

Here is a screenshot of how the styles in head get ordered in production build

[availchet]

@oliviertassinari If I am passing a custom class generated by makeStyles to a Button, then shouldn’t it take priority over the Material UI styles?

Let me share an example: This is the code when I am running via npm start

This is the code when I am running after npm build

There is no other change in code except running the built code. Note that the padding: 0 is overridden by the .MuiIconButton-root class.

Using {index:1} fixes this issue. I don’t see how I can call makeStyles sooner to affect the injection order. Can you shed some light on that?