Why `!important` is required?

[seiyab]

MDN says

Always look for a way to use specificity before even considering !important Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css). Never use !important when you're writing a plugin/mashup. Never use !important on site-wide CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception

related: https://github.com/wwayne/react-tooltip/issues/684

[Johnrobmiller]

!important should not be necessary. This is very awkard and clunky design. It also makes it impossible to use css libraries like Tailwind with React-Tooltip.

[aronhelser]

I agree. Please submit a PR if you are able to fix it!

On Tue, Sep 14, 2021 at 9:11 PM John Miller @.***> wrote:

!important should not be necessary. This is very awkard and clunky design. It also makes it impossible to use css libraries like Tailwind with React-Tooltip.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wwayne/react-tooltip/issues/719#issuecomment-919620221, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEX6THPRU3KIDDGUGSFEB23UB7XDTANCNFSM5DPKADKA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Johnrobmiller]

I agree. Please submit a PR if you are able to fix it! … On Tue, Sep 14, 2021 at 9:11 PM John Miller @.***> wrote: !important should not be necessary. This is very awkard and clunky design. It also makes it impossible to use css libraries like Tailwind with React-Tooltip. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#719 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEX6THPRU3KIDDGUGSFEB23UB7XDTANCNFSM5DPKADKA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Although I would love to submit a PR to remove the need for "!important", my life is sadly too busy to submit non-work PRs. However, I had two ideas about how this could be done this morning when I woke up.

---

Here is the first idea:

Firstly, if the developer wants to directly override classes in their own css/scss files by doing something like this...

.__react_tooltip_component {
  background-color: 'white' !important;
}

...then it would be impossible to design in a way that would not require the nororious !important.

However, libraries should not be designed to require direct overrides anyways (i.e., Material UI * cough cough *). So, the above fact doesn't actually matter.

If the developer is adding their own custom styles to <ReactTooltip />, then it might be possible to have all the default styles in __react_tooltip_component contained within a parent div wrapper. Then any custom classes could be applied to the child div. It would look like this:

<div class='__react_tooltip_component'>
  <div class='developers_custom_classes'>
    // the actual tooltip goes in here
  </div>
</div>

The child's classes will take priority over the parent's classes, and so there is no need to use "!important".

With all this said, I'm not familiar in the slightest bit with the internals of React-Tooltip, so there might be a very good reason why this will not work. It might also require a lot of refactoring, since even if the parent's classes are getting overriden, there might be some unintended side-effects of having a bunch of styles in the parent div.

---

Here is the second idea:

If the first idea won't work, then it might be necesarry to do something a bit more hacky.

So, the default classes (i.e., __react_tooltip_component) and the user's custom classes get all mooshed together by react. Here's my idea:

1. get all the classes of the tooltip before it is rendered the first time
2. write an algorithm that compares the styles from __react_tooltip_component to the developer's custom classes. The algorithm should return a single style sheet (possibly using a React inline styles object, since that might be the simplest). The style sheet will contain all the custom styles and then whatever default styles that dont override the custom ones.
3. The first time the tooltip renders and every time after, it will be rendered with the new styles. The old styles only exist to construct the new styles.

This solution is more complicated than the first one, but I think it could work.

[seiyab]

Oops I misunderstood the cause. I considered !important is required because react-tooltip uses !important. Actually, it doesn't use !important and higher specificity works well. On the other hand, requiring !important or higher specificity is inconvenient as mentioned https://github.com/wwayne/react-tooltip/issues/719#issuecomment-919620221 and I think this issue is still meaningful.

[seiyab]

The cause seems to be rendering style tag inside the body. MDN says:

later <style> element override those in the earlier one, if they have equal specificity.

Usual libraries add style tag inside the head. So our style will be overriden. react-tooltip seems to violate:

The

written in MDN

https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L808-L811

I myself would not submit PR because the implementation of react-tooltip is highly complicated and it seems to be easier to re-implement from scratch...

[danielbarion]

Hi guys, this will be handled on V5, thanks for the report!

https://github.com/ReactTooltip/react-tooltip/discussions/812

[danielbarion]

Closing due to: https://react-tooltip.com/docs/examples/styling