How to implement `CSS` nested rules in `JSS`?

Question

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"
      }
    }

Answer 1

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.

Answer 2

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.

Answer 3

Material-UI includes a set of JSS plugins documented here : https://material-ui.com/customization/css-in-js/#plugins

In these plugins set there is jss-nested which allows for nested rules : http://cssinjs.org/jss-nested/

But in your sample code there is actually no need for nested rules, as you just need one : "cardHeader"