@zlodiak

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

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

<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
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
0xD34F
@0xD34F
const styles = () => ({
  wrapper: {
    background: 'red',
    color: 'blue',
    '& h1':  {
      color: 'green',
      '& a': {
        color: 'magenta',
      }
    },
  },
});

Соответственно, при отрисовке компонента только wrapper и указываете.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы