I would like know how to work with css
class-nesting in Material-UI or in JSS
in general?
I am trying as below.
card: {
cardHeader:{
marginTop:"30px"
}
}
For JSX like
<div className={classes.card}>
<div className={classes.cardHeader}></div>
</div>
you can use:
card: {
'& $cardHeader': {
marginTop: 30,
}
}
Targeting nested classes can be helpful if you override default JSS styles in Material UI components.
It would be the same as writing CSS(not to be confused with SCSS or SASS). JSS transforms all js to pure CSS pretty much all CSS properties should work here as well.
card: {
'& .cardHeader': {
marginTop: 30 // px is default
}
}
You will need to setup up plugins for this thanks @ricovitch for pointing out this. For default you can check thisjss-preset-default. For react you can simply use react-jss which has built-in default presets.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With