CODEWITHSUNDEEP
reactjsmaterial-uijss
Jax-p
Jax-p

Reputation: 8531

Material UI: affect children based on class

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.

Upvotes: 2

Views: 1158

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

Below is the correct syntax:

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

Edit Nested selector

Related answers and documentation:

Upvotes: 3

Related Questions