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

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];
}

环境

我在React.js中使用Material-UI。在这种情况下，我正在使用withStyles()导出。

Answer 1

下面是正确的语法：

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

相关答案和文档：

• jss-plugins嵌套文档