Material-ui 覆盖反应情绪规则

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

Answer 2

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