Document importing Hopper's CSS on a layer
Opened this issue · 2 comments
A number of developers have encountered difficulties when trying to overwrite Hopper's CSS styling with their own. The standard practice of simply importing Hopper's CSS into the main stylesheet often leads to issues where Hopper's styles take precedence over custom styles due to CSS specificity and source order.
The solution to this problem is to use layers.
This allows developers to import Hopper's css into a specific layer, making it easier to manage styling precedence.
@import url("@hopper-ui/icons/index.css") layer(design-system)
we should document this standard pratices in our documentation
I would not say that it's standard practice, layers are pretty much new in the CSS environment. Documenting could be done, if it does not encourage the practice until we have more experience with this. It was not a huge success so far.
The way it was done in igloo was unorthodox, but importing css files on different layers is exactly the intended purpose of this feature.