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: create a common style material ui style
const styles = theme => ({
...card(theme),
grid: {
height: '100%',
width: 'fit-content',
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2,
flexWrap: 'nowrap',
overflowY: 'hidden',
},
name: {
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: '1.12rem',
fontColor: theme.palette.text.main,
[theme.breakpoints.down('sm')]: {
fontSize: '0.9rem',
}
},
state: {
textOverflow: 'ellipsis',
margin: '0 auto',
marginTop: theme.spacing.unit / 2,
fontSize: '1.0rem',
fontColor: theme.palette.text.light,
[theme.breakpoints.down('sm')]: {
fontSize: '0.8rem',
}
},
alarmArmedHome: {
background: theme.palette.backgrounds.card.alarm.home,
},
alarmArmedAway: {
background: theme.palette.backgrounds.card.alarm.away,
},
alarmTriggered: {
background: theme.palette.backgrounds.card.alarm.triggered,
},
icon: {
margin: '0 auto',
color: theme.palette.text.icon,
fontSize: '2.7rem',
[theme.breakpoints.down('sm')]: {
fontSize: '1.7rem',
}
},
});
Example 3: 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);