How to use react-tooltip with Sass / CSS modules

[targumon]

In my project I use Sass with CSS modules.

This means I name my CSS classes (in the source code) without worrying about collisions, because the classes are scoped to the component where they are used and have a uniquely generated name (in the browser).

This is relevant to react-tooltip when importing the stylesheet. If doing it as the docs suggest, it won't work, because the class names (e.g. styles-module_tooltip__mnnfp, styles-module_arrow__K0L3T, etc.) will be renamed.

The proper way to import it in this scenario is inside a sass file like this:

:global {
  @import '~react-tooltip/dist/react-tooltip';
}

(global ensures the names are kept)

Maybe add this suggestion to the docs?
I can make a PR, but am not sure how common is my setup.

p.s.
Since Sass with CSS modules "knows" what classes are used within a component, it has a nice advantage of NOT bundling unused classes. Using global unfortunately loses this advantage so for example all the light/dark/warning/error variants are imported even when not used.
For this reason I ended up manually copying just the classes actually in use.

[gabrieljablonski]

For now, let's just have this discussion page as reference.
If in the future more people complain about this, we'll see how it would be best to add it to the docs/readme.

Thanks for the heads up.