Как в JSS описывать вложенные стили?

Question

[zlodiak]

Есть разметка, состоящая из трёх уровней вложенности:

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

Соответствующее ей описание стилей выглядит так:

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

Как видите, из-за отсутствия вложенности в JSS приходится в разметке три раза присваивать классы через атрибут 'className'. Это не удобно потому что, если вложенности будет из 10 уровней, то придётся 10 раз присваивать классы через атрибут 'className'.

В SCSS эта проблема решается так:

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

В результате в разметке класс прописывается только один раз.

Помогите пожалуйста реализовать подобный подход в JSS.

LIVE DEMO

Answer 1

[0xD34F]

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

Соответственно, при отрисовке компонента только wrapper и указываете.