0

I'm trying out material ui react

This is my scss (hover over .content, and .replyBtn gets visibility: visible):

.content {
  &:hover {
    .replyBtn {
      visibility: visible
    }
  }
}

.replyBtn {
  visibility: hidden;
}

JSS: how?

const useStyles = makeStyles(theme => ({
  content: {
    '&:hover': {
       // how to change reply btn visibility? 
    }
  },
  replyBtn: {
    visibility: hidden
  }
}));

Thanks

user1354934
  • 8,139
  • 15
  • 50
  • 80
  • You can use `display:none` instead of `visibility:hidden` and `display:block` instead of `visibility:visible` – Marios Nikolaou Dec 14 '19 at 22:09
  • Does this answer your question? [How do you change a style of a child when hovering over a parent using material-ui jss styles](https://stackoverflow.com/questions/59178802/how-do-you-change-a-style-of-a-child-when-hovering-over-a-parent-using-material) – Ryan Cogswell Dec 15 '19 at 00:46

2 Answers2

4
   content: {
    '&:hover $replyBtn': {
       visibilty: 'visible'
     }
  },
   replyBtn: {
    visibility: 'hidden'
   }

You should see this: https://pantaley.com/blog/Start-your-JSS-journey-with-the-selectors-cheat-sheet/

Friendly Minhyuk
  • 79
  • 1
  • 7
0

In this example replyBtn is the css-class:

const useStyles = createUseStyles({
  replyBtn: {
    "&:hover": {
      visibility: "hidden"
    }
  }
});
imiro
  • 167
  • 7
  • I want the reply button to be visible when I hover over the content – user1354934 Dec 14 '19 at 22:03
  • visible and hidden are the values, but hidden element doesnt seem to react to mouse-over event. so maybe create parent element to which has mouseOver function to change the childs css class. – imiro Dec 14 '19 at 22:57
  • you do have scss support installed? i guess jss react doesnt support it out of the box. – imiro Dec 15 '19 at 00:21