Issue with trying to prevent hover effect from being applied-CodePudding

So, in my application I have the following HTML that is generated from my React application, which uses components from 3rd party libraries:

<button  disabled>
    <span >some icon here</span>
    Some text here
</button>

I am trying to configure the span so that it does not change colour when the button is hovered over. I need to override the default CSS that comes from this 3rd party library and that is currently being applied to the icon when the button is hovered over. When the button is hovered, over, the icon changes colour, and the CSS (when inspecting in Chrome) looks like the following (all from 3rd party library who provide the component):

.gmRHND .sc-ifAKCX:hover .sc-bwzfXH {
    color: red; // this is applied
}

.gmRHND .sc-bwzfXH {
    color: blue; // strikethrough in chrome, being overridden
}

And yet, even when I apply my own CSS such as the following, the strikethrough still applies

.bulk-action:disabled:hover .bulk-action-icon {
    color: initial; // `unset` also doesn't work
}

So, I need the blue to be applied without specifically declaring color: blue in the above CSS. Am I missing something? Any ideas?

Note: I've replaced the actual colour codes that are used with red and blue for simplicity

CodePudding user response：

A simple !important keyword will probably solve your problem

.gmRHND .sc-bwzfXH {
    color: blue; !important
}

usually, third party codes don't use the !important keyword to let you have conrtol over your code a bit more even when using theirs. if this doesn't do the trick, you can try this:

<div >
  <div >
    your text
  </div>
</div>

and the css:

.new-class{
  color: blue;
}

CodePudding user response：

the names of classes seem to be random. you have to give a class to your controllable parent div that you have and then control your desire element.

for example :

<div className="myClass">
      <ComponentFromLibrary />
</div>

then in your CSS you have to find your desire element for example:

.myClass ...... button >span{
    //some styles
 }

CodePudding user response：

If you can add a css rule to your styles, you can create a rule that has a bigger specificity of the rule already in place that sets the text-color of element where the mouse is hovering.

In this demo I show how you could create such a more specific rule. The specificity is given by how many selectors were used in this order: !important,inline,id,class,type. Now I don't expect this to be perfectly clear but consider it a shallow hint on how rules get applied.

Anyway on a given style attribute, !important says that it should override that value whatever is the specificity of that rule. Of course collisions may arise if too many rules used !important.

.specific-class-with-rules-already-inplace {
    background: blue;
    color: white;
    padding: 2px 5px;
    cursor: pointer;
}

.specific-class-with-rules-already-inplace:hover {
    color: red;    
}

/*
here you are overriding the hover behaviour with a rule having more specificity
you could force higher specificity using !important after the style attribute value
but it's unneeded here
*/
.bulk-action .bulk-action-icon:hover {
    color: unset;
}

<div >
  <span >Overrides</span>
</div>

<br/>

<span
  >
  Element not overriding the rule
</span>