使用jss悬停时如何更改另一个类的可见性

Question

我正在尝试材料 ui react

这是我的 scss（将鼠标悬停在 .content 上，.replyBtn 获得可见性：可见）：

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

.replyBtn {
  visibility: hidden;
}

JSS：如何？

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

谢谢

Answer 1

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

你应该看到这个：https://pantaley.com/blog/Start-your-JSS-journey-with-the-selectors-cheat-sheet/

Answer 2

在本例中，replyBtn 是 css 类：

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