Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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"
      }
    }
like image 800
Santhan Frankenstein Avatar asked Aug 02 '18 13:08

Santhan Frankenstein


2 Answers

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.

like image 136
user2811588 Avatar answered Sep 22 '22 21:09

user2811588


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.

like image 35
Lalit Yadav Avatar answered Sep 22 '22 21:09

Lalit Yadav