Material UI：根据班级影响孩子答案

【问题标题】：Material UI: affect children based on classMaterial UI：根据班级影响孩子
【发布时间】：2020-02-25 19:16:00
【问题描述】：

我想要达到的目标

我有两个类 - root 和 button - 我想在 root 状态下影响 button 类（例如 :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];
}

环境

我正在使用带有 React.js 的 Material-UI。在这种情况下，我使用withStyles() export。

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

以下是正确的语法：

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