Material-ui overrides react emotion rules

Question

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??

Answer 1

The official documentation now shows a very simple way to do it:

https://material-ui.com/styles/advanced/#css-injection-order

By default, the style tags are injected last in the element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.

injectFirst

The StylesProvider component has an injectFirst prop to inject the style tags first in the head (less priority):

import { StylesProvider } from '@material-ui/core/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>