Как использовать дочерние селекторы в JSS - PullRequest
Новая
       11

Как использовать дочерние селекторы в JSS

0 голосов
/ 29 июня 2018

Я экспериментирую с JSS, чтобы увидеть, реально ли перенести базу кода Sass. У меня есть очень простой пример стиля CSS, который при наведении меняет стиль дочернего узла. 

span {
  color: red;
}

button:hover span {
  color: blue;
}

<button>
  <span>Click Me</span>
</button>

Я не уверен, как написать это в JSS. Что-то, что я пробовал, выглядит так: 

const styles = {
  button: {
    '&:hover': {
      span: {
        color: 'blue',
      }
    }
  },
  span: {
    color: 'red',
  }
}

const { classes } = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class=${classes.button}>
    <span class=${classes.span}>Click Here</span>
  </button>
`

Спасибо!

1 Ответ

0 голосов
/ 29 июня 2018

Вы пробовали делать: 

const styles = {
  button: {
    '&:hover span': {
       color: 'blue',
    }
  },
  span: {
    color: 'red',
  }
}
...