更改悬停语义 ui-react 组件的样式

Question

如果我为某些组件设置了一个类名，比如

<Segment className="Change" color='blue' inverted></Segment>

在我的 css 中我使用

.Change:hover{
  background-color: black; //or any other change on hover
}

悬停时没有任何内容被覆盖。

我还注意到有许多其他组件拒绝我的更改，似乎是随机的。一个语义组件会让我改变宽度，而下一个则不会。是同一个问题的原因吗？如何覆盖悬停时的颜色？

Answer 1

查看Segment Component（ github ）的源代码后，我发现它有两个默认类：segment和ui。此外，您还使用了两个 propscolor=blue和inverted。所以我建议使用以下代码。

.ui.segment.blue.inverted.Change:hover {
  background-color: black !important;
}