Material UI：影响 children 基于 class

Question

我想要达到的目标

我有两个 classes - root 和 button - 我想影响 button class 的 root 状态（因为例如 :hover).

---

我的尝试

我正在尝试在 root:hover 上显示 button。

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() export.

Answer 1

以下是正确的语法：

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

相关答案和文档：

• jss-plugin-nested documentation