如何在 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的评论中提到的，如果它是一个类名，你可以做这样的事情。

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