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

css material-ui jss
Santhan Frankenstein picture Santhan Frankenstein · Aug 2, 2018 · Viewed 10.5k times · Source

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

user2811588 picture user2811588 · Jan 12, 2020

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.

Related questions

How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More
Styling the placeholder in a TextField

The TextField API doesn't mention anything about how one could style the pseudo placeholder element of the input element. Basically, I would like to change the default styling of the placeholder text, and the normal bag of tricks doesn't work, …

Read More
styling element inside class material ui

is it possible to style all Fields inside Grid in material-ui? I already know how to do it in css but I can't find how to do this in jss I've tried this but not working: const styles = { shopForm: { textAlign: …

Read More