材质用户界面：根据班级影响孩子

Question

我要实现的目标

我有两个类-root和button-我想影响处于button状态的root类（例如:hover）。

---

我的尝试

我正在尝试在button上显示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()导出。

Answer 1

下面是正确的语法：

const styles = {
  root: {
    "&:hover $button": {
      display: "block"
    }
  },
  button: {
    display: "none"
  }
};

相关答案和文档：

• jss-plugin-nested documentation
• Using material ui createStyles
• Advanced styling in material-ui