how to override props in css in material ui at root level code example
Example 1: adding two jss style in material ui styele
import combineStyles from 'path/to/combineStyles'
import buttonStyles from '/path/to/buttonStyle';
import componentStyles from '/path/to/componentStyle';
const s1 = theme => ({
toolbar: {
backgroundColor: theme.palette.primary.main,
color: '#fff',
...theme.mixins.toolbar,
},
link: {
color: theme.palette.primary.main,
width: '100%',
textDecoration: 'none',
padding: '12px 16px',
},
});
const s2 = {
menuItem: {
height: 'auto',
padding: 0,
},
};
const combinedStyles = combineStyles(s1, s2, buttonStyles, componentStyles);
export default withStyles(combinedStyles)(MyComponent);
Example 2: use theme in class component material ui
import { withStyles } from "@material-ui/core/styles";
const styles = theme => ({
root: {
backgroundColor: "red"
}
});
class ClassComponent extends Component {
state = {
searchNodes: ""
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>Hello!</div>
);
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent);