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>
)
}
}
@mikew @panuavakul
You can use the typical sass-like nested selectors. Selector as keys and value as object with css properties.
Only thing you need to know is the class names you want to target. If you render the input you can inspect and see the class names of the element you want to target. There may also be some info in the docs, but I haven't noticed it.
For the MUI within
TextField
I can see these class names on theinput
.Here's an example.
If you need more specificity it's best to simply chain more class names.