Material UI: affect children based on class

Question

What I am trying to achieve

I have two classes - root and button - I want to affect button class on root state (for example :hover).

---

My attempt

I'm trying to display button on 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'
   }
}

Expected ouput:

.element-root-35 .element-button-36:hover {
  display: block;
}

Current output:

.element-root-35:hover {
  button: [object Object];
}

---

Environment

I'm using Material-UI with React.js. In this situation I'm using withStyles() export.

Abbate

Answer 1

Below is the correct syntax:

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

Related answers and documentation:

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

Indehiscent