[英]How to use child selectors in JSS
I'm experimenting with JSS to see if it is realistic to migrate a Sass code base.我正在试验 JSS,看看迁移 Sass 代码库是否现实。 I have a very basic example of a CSS style that, when hovered, modifies the style of a child node.我有一个非常基本的 CSS 样式示例,当悬停时,它会修改子节点的样式。
span {
color: red;
}
button:hover span {
color: blue;
}
<button>
<span>Click Me</span>
</button>
I am unsure how to write this in JSS.我不确定如何在 JSS 中编写它。 Something I have tried looks like:我尝试过的东西看起来像:
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>
`
Thanks!谢谢!
Have you tried doing:你有没有试过这样做:
const styles = {
button: {
'&:hover span': {
color: 'blue',
}
},
span: {
color: 'red',
}
}
As mentioned in the comment by @cwouter, if it was a class name, you can do something like this.正如@cwouter 在评论中提到的,如果它是一个类名,你可以做这样的事情。
const styles = {
button: {
'&:hover $some_class_name': {
color: 'blue',
}
},
some_class_name: {
color: 'red',
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.