更改悬停语义UI响应组件的样式 [英] Change styling on hover semantic-ui-react components

问题描述

如果我为某些组件设置了className，例如

if I set up a className for certain components like

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

在我的CSS中，我使用

and in my css I use

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

悬停时不会覆盖任何内容。

nothing is overriden on the hover.

我还注意到，还有许多其他因素似乎是随机拒绝我的变化的。一种语义成分将使我改变宽度，而另一种则不会。原因是否是同一问题？如何在悬停时覆盖颜色？

I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?

推荐答案

查看细分组件的源代码后（ github ），我发现它有两个默认类：段和 ui 。另外，您使用了两个道具 color = blue 和倒置的。因此，我建议使用以下代码。

After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.

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

正在 DEMO

这篇关于更改悬停语义UI响应组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！