Overriding Material UI styles with Styled Components.md

For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

First method (override Material UI classnames):

1 - Add the property classes in the AppBar component:

    <AppBar classes={{root: 'my-root-class'}}

2 - Override the styles with the styled components:

    styled(AppBar)`
      &.my-root-class {
        z-index: 1500;
      }
    `

Second method (force specificity):

    styled(AppBar)`
      && {
        z-index: 1500;
      }
    `

Third method (use a custom classname):

1 - Add the classname in the classname property:

    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesIfNeeded}`}

2 - Override the styles with the styled components:

    styled(AppBar)`
      &.my-class {
        z-index: 1500;
      }
    `

Fourth method (use a custom classname generator)

You can control the classenames that will be generated by MaterialUI. Maybe it will require a little more effort but it can also bring more flexibility.

Please see these sections of the documentation:

• https://material-ui.com/customization/css-in-js/#global-css
• https://material-ui.com/customization/css-in-js/#creategenerateclassname-options-class-name-generator
• https://material-ui.com/customization/css-in-js/#css-injection-order

/path/to/the/theme/provider/ThemeProvider.js:

import React from "react"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
import {createGenerateClassName} from "material-ui/styles"
import JssProvider from "react-jss/lib/JssProvider"

import {yourTheme} from "/path/to/your/theme"

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true,
  productionPrefix: 'mui',
})

const ClassNameGenerator = (p) =>
  <JssProvider generateClassName={generateClassName} {...p}>
    {p.children}
  </JssProvider>

export class ThemeProvider {

  render() {
    return (
      <ClassNameGenerator>
        <MuiThemeProvider theme={yourTheme}>
          {this.props.children}
        </MuiThemeProvider>
      </ClassNameGenerator>
    )
  }
}

/path/to/the/root/component/Root.js

import React from "react"
import {Provider} from "react-redux"

import {ThemeProvider} from "/path/to/the/theme/provider/ThemeProvider"
import {Router} from "/path/to/your/router/definitions/Router"
import {reduxStore} from "/path/to/your/redux/store"

export class Root {

  render() {
    return (
      <Provider store={reduxStore}>
        <ThemeProvider>
          <Router />
        </ThemeProvider>
      </Provider>
    )
  }
}