How to change visibility of another class when hovering using jss

Question

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

Answer 1

   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/

Answer 2

In this example replyBtn is the css-class:

const useStyles = createUseStyles({
  replyBtn: {
    "&:hover": {
      visibility: "hidden"
    }
  }
});