For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
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;
}
`
styled(AppBar)`
&& {
z-index: 1500;
}
`
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;
}
`
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>
)
}
}
Although a bit dirty, here is my version to enforce the specificity at the very first place (logic can be wrapped in a component so React can pick it up):
This ensure CSS injected by the
styled-components
will always win, and it only need to be exercise once and before browser start to paint the next frame.