Webpack production build causes CSS to be injected in different order.
See original GitHub issue- 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 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:13 (4 by maintainers)
Top Results From Across the Web
Webpack production build causes CSS to be injected ... - GitHub
Webpack production build causes CSS to be injected in different order. #18919 ; Current Behavior ; Expected Behavior ; Steps to Reproduce.
Read more >webpack build css rules have different order then in ...
When I am running npm run build to build a distribution for my Vue.js application the CSS rules applied in the dist app...
Read more >style-loader - webpack
Automatically injects styles into the DOM using multiple <style></style> . It is default behaviour. component.js import "./styles.css";.
Read more >A mostly complete guide to webpack 5 (2020)
A mostly complete guide to webpack's capabilities, always to keep close at hand.
Read more >Loading Styles - SurviveJS
Webpack doesn't handle styling out of the box, and you will have to use loaders and plugins to allow loading style files. In...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
andmakeStyles
be greater than the one used for components? Currently, our only option is adding options object with index of 1 to eachwithStyles
andmakeStyles
Here is a screenshot of how the styles in head get ordered in production build
@oliviertassinari If I am passing a custom class generated by
makeStyles
to aButton
, 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 callmakeStyles
sooner to affect the injection order. Can you shed some light on that?