Материал интерфейса: влияет на детей в зависимости от класса

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

Answer 1

Ниже приведен правильный синтаксис:

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

Соответствующие ответы и документация:

• вложенная в jss-плагин документация
• Использование пользовательского интерфейса материала createStyles
• Усовершенствованная стилизация материала-интерфейса пользователя