Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

isolate styles to reduce collisions

See original GitHub issue

Is your feature request related to a problem? Please describe.

When using Hope UI in parallel with other components, the other components are affected by Hope UI’s global CSS reset, even if they are not directly wrapped with <HopeProvider>.

Describe the solution you’d like

Apply the CSS reset starting from a .hope-root container (or something similar), rather than the document root.

For example, Svelte Materialify implements this to some degree and applies most of its styles starting at .s-app; and there can be multiple .s-app roots.

Issue Analytics

State:
Created a year ago
Comments:7

Top GitHub Comments

1reaction

fabien-mlcommented, May 3, 2022

This is possible, however this will require <HopeProvider> to render an extra div element to apply the .hope-root class.

0reactions

Enteleformcommented, May 4, 2022

Or just a scopedCssReset props which is false by default (for global reset) and when you set it to true HopeProvider wrap it’s children with the <ScopedCssReset> for you.

That seems like a pretty good implementation 👍

For example .hope-root a selector break css classes applied to the <Anchor> component which have a lower specificity (11 vs 10).

Just checked out how the CSS was being implemented and saw that you’re using stitches, which I’m not familiar with. Is this something that can be overcome with their style API?