如何在 JSS 中使用子选择器

Question

我正在试验 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>
`

谢谢！

Answer 1

你试过吗：

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

Answer 2

如@cwouter 的评论所述，如果它是一个 class 名称，您可以这样做。

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

如何在 JSS 中使用子选择器

How to use child selectors in JSS

javascript

jss