使用jss懸停時如何更改另一個類的可見性

Question

我正在嘗試材料 ui 反應

這是我的 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-class：

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