10

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: Development mode

But in production the styles are laid out the other way around

production mode

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

2 Answers 2

12

The issue was resolved by changing the order of rendering the style rules. I created a wrapper that needs to wrap the entire app.

import React from 'react'
import { create } from 'jss'
import JssProvider from 'react-jss/lib/JssProvider'
import { createGenerateClassName, jssPreset } from 'material-ui/styles'

const styleNode = document.createElement('style')
styleNode.id = 'insertion-point-jss'
document.head.insertBefore(styleNode, document.head.firstChild)

// Configure JSS
const jss = create(jssPreset())
jss.options.createGenerateClassName = createGenerateClassName
jss.options.insertionPoint = document.getElementById('insertion-point-jss')

function Provider (props) {
  return <JssProvider jss={jss}>{props.children}</JssProvider>
}

export default Provider

The wrapper creates an element as the first child inside head. All material ui styles are instructed to be placed there thus they are first in order and can be overridden by emotion rules that come next.

4
  • 1
    Nice find. I wish there was component-level solution rather than an HOC that needs to wrap your app. Commented Jul 30, 2018 at 20:57
  • 1
    material-ui docs on the subject here material-ui.com/guides/interoperability/#react-emotion (See "Note" on CSS injection order)
    – Bob B
    Commented Oct 12, 2018 at 23:15
  • @Bob B I think that this will not work because material-ui still places their styles before the case injection point.
    – Nickey
    Commented Oct 14, 2018 at 7:18
  • It works. You just need to follow the CSS injection instructions I mentioned in the "Note" portion. One of the options is similar to what you proposed in your answer. I was just including a link to the official docs since they provide other options there as well. material-ui.com/customization/css-in-js/#css-injection-order
    – Bob B
    Commented Oct 14, 2018 at 18:16
5

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.