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

Я экспериментирую с 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>
`

Спасибо!


javascript jss
person Jon Sakas    schedule 29.06.2018    source источник

Ответы (2)


arrow_upward
17
arrow_downward

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

const styles = {
  button: {
    '&:hover span': {
       color: 'blue',
    }
  },
  span: {
    color: 'red',
  }
}
person deowk    schedule 29.06.2018
comment
Спасибо! Как бы это работало, если бы имя класса не соответствовало селектору элемента. Например, если это было someClass. - person Jon Sakas; 29.06.2018
comment
@JonSakas, добавьте к классу префикс $. Например: "&:hover $someClass" - person cwouter; 28.08.2019
comment
при наведении курсора на кнопку этот код изменит цвет всего элемента диапазона или элементов диапазона, которые вложены в кнопку? - person Ali Baghban; 07.07.2021

arrow_upward
10
arrow_downward

Как упоминалось в комментарии @cwouter, если это было имя класса, вы можете сделать что-то вроде этого.

const styles = {
  button: {
    '&:hover $some_class_name': {
       color: 'blue',
    }
  },
  some_class_name: {
    color: 'red',
  }
}
person VnoitKumar    schedule 27.05.2020