我想要实现的目标
我有两个类 - root 和 button - 我想影响 root 状态下的 button 类(例如 :hover)。
我的尝试
我正在尝试在 root:hover 上显示按钮。
const styles = {
root: {
'&:hover' {
// here I can style `.root:hover`
button: {
// and I've tried to affect `.root:hover .button` here
display: 'block'
}
}
},
button: {
display: 'none'
}
}
预期输出:
.element-root-35 .element-button-36:hover {
display: block;
}
当前输出:
.element-root-35:hover {
button: [object Object];
}
环境
我正在使用 Material-UI 和 React.js。在这种情况下，我使用 withStyles() 导出。
最佳答案
下面是正确的语法:
const styles = {
root: {
"&:hover $button": {
display: "block"
}
},
button: {
display: "none"
}
};
相关答案和文档:
关于reactjs - Material 用户界面 : affect children based on class，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58626226/