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

Question

Я хотел бы знать, как работать с CSS-комбинаторами в материале UI или в Jss в целом? Я стараюсь, как показано ниже.

card: {
    cardHeader:{
        marginTop:"30px"
    }
}

Answer 1

Для JSX вроде

<div className={classes.card}>
  <div className={classes.cardHeader}></div>
</div>

вы можете использовать:

card: {
  '& $cardHeader': {
      marginTop: 30,
  }
}

Таргетинг на вложенные классы может быть полезен, если вы переопределите стили JSS по умолчанию в компонентах пользовательского интерфейса материала.

Answer 2

Это было бы то же самое, что написание CSS(не путать с SCSS или SASS). JSS преобразует все js в чистый CSS, почти все свойства CSS должны работать и здесь.

card: {
 '& .cardHeader': {
   marginTop: 30 // px is default
 }
}

Вам нужно будет настроить плагины, спасибо @ricovitch за указание на это. По умолчанию вы можете проверить этот jss-preset-default. Для реакции вы можете просто использовать реактив-jss со встроенными настройками по умолчанию.

Answer 3

Material-UI включает в себя набор плагинов JSS, которые описаны здесь: https://material-ui.com/customization/css-in-js/

В этом наборе плагинов есть jss-nested, который учитывает вложенные правила: http://cssinjs.org/jss-nested/

Но в вашем примере кода на самом деле нет необходимости во вложенных правилах, так как вам просто нужно одно: "cardHeader"