In my project I use Material-ui components along with react-emotion.
Let me give you an example that is problematic. I have this element:
<CardHeader title={stat} classes={{ root: statNumber }}/>
where
const statNumber = css`padding: 0;`
this way I get to override the default padding (16px) of CardHeader with 0 that is my intention.
In development mode everything works as expected but in production the padding: 0 rule gets overridden by the default padding 16px.
The reason this happens is that in development mode the styles are added in header dynamically. First come the Material-UI styles and then the emotion styles. Like this:
But in production the styles are laid out the other way around
This is the reason styles are overridden in production mode.
Material ui provides an explanation on this https://material-ui.com/styles/advanced/#css-injection-order
but with the solution proposed I cannot change the order of emotion and material-ui styles are ordered. I can only change material ui and move it further down
Anyone has an idea how to fix this??