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>
    )
  }
}

All the above mentioned methods are ugly, if you want to pass classes object, just do it this way:

const ModifiedAppBar = styled(({...rest}) => (
  <AppBar classes={{root: 'my-root-class'}} {...rest}/>
))`
  .my-root-class {
    z-index: 1500;
  }  
`

this is literally what the gist is proposing as a solution

@JimVanEeden Thank you, it worked.

In material-ui v4, you can simply do:

import { StylesProvider } from '@material-ui/styles';
// [other imports]

// [code]

function App() {
    return (
        <StylesProvider injectFirst> // this
            <MuiThemeProvider theme={theme}
                <Routes />
            </MuiThemeProvider>
        </StylesProvider>
    );
}

Took me a bit to find it, because it's not in the migration guide. The original technique as described above doesn't work anymore in v4. Hope this helps somebody else.

When I use this "solution", I see a flickering of styles in the browser. I'm guessing styles are moved in the DOM client-side (not server-side). For me this is a deal-breaker. Would anyone know if I'm missing something else?

Just want to post a thanks here man. Thank you.

Man i just take a Minute to say you thanks and god bless you since months i was trying to find a clever solution to this problem.