Material-ui overrides react emotion rules

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>

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.