问题

I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.

我知道有关这方面的其他类似主题，但我想知道如何让我的情况起作用。迄今为止，我还没有能够根据提供的信息使其工作。

I am trying to modify the background color of a Text button when the mouse hovers.

我试图在鼠标悬停时修改文本按钮的背景颜色。

If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).

如果我在按钮内联样式中更改backgroundColor样式，它会完全更改相应的区域。似乎没有办法内联添加:hover功能（我正在使用TS，它显示为错误。尽管它可以编译，但没有效果）。

If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
如果我使用SCSS模块，我可以再次更改整个背景颜色。但如果我使用:hover功能更改相同的属性，它只影响文本部分（请参见屏幕截图）。

I've tried targeting more specifically the ant-btn-text, but to no effect still.

我已经尝试更具体地定位ant-btn-text，但仍然没有效果。

Would someone have an idea? I would like to avoid creating a state variable for this.

是否有人有想法？我希望避免为此创建状态变量。

答案1

得分: 1

AntD类通常会覆盖你自己的CSS样式。你可以使用!important来覆盖它。

答案2

得分: 0

好的，这是你要翻译的内容：

所以我找到了它（现在发布，因为当地时间已经很晚了）。
所以与我的原始帖子相比，& 父选择器是必需的，而添加 !important 也起到了作用。

所以在我的情况下，拥有：

.updateButton {
    &:hover:{
        background-color: red !important;
    }
}

覆盖了默认样式。

谢谢！

.updateButton {
    &:hover:{
        background-color: red !important;
    }
}