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

Allegra

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.

Cloaca

how about a rule like '&-postfix'? The only way to reference this was using `${classes.card}-postfix`. Is this the correct way? – Oman

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.

Prescriptible

This does not work if you don't configure jss-nested plugin – Foretell

Have been using this with github.com/cssinjs/react-jss which does it out of box – Prescriptible

Appreciate your help! Worked for me – Mcvay

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"

Foretell