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

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