How to describe nested styles in JSS?

Question

React

There is a markup consisting of three levels of nesting:

<div className={classes.wrapper}>
    wrapper
    <h1 className={classes.hello}>
      Hello
      <a className={classes.world} href="#">
        world
      </a>
    </h1>
  </div>

The corresponding stylesheet looks like this:

wrapper: {
  background: "red",
  color: "blue"
},
hello: {
  color: "green"
},
world: {
  color: "magenta"
}

As you can see, due to the lack of nesting in JSS, you have to assign classes three times in the markup through the 'className' attribute. This is not convenient because if the nesting is from 10 levels, then you will have to assign classes 10 times through the 'className' attribute.

SCSS solves this problem like this:

.wrapper {
    background: "red",
    color: "blue"
  .hello {
    color: "green"
    .world {
      color: "magenta"
    }
  }
}

As a result, the class is written only once in the markup.

Please help me implement this approach in JSS.

LIVE DEMO

Answer 1

const styles = () => ({
  wrapper: {
    background: 'red',
    color: 'blue',
    '& h1':  {
      color: 'green',
      '& a': {
        color: 'magenta',
      }
    },
  },
});

Accordingly, when rendering a component, only wrapper is specified.