So I want to do something for my entire app like
div {
width: 100%;
}
and this works fine. But as soon as I start including 3rd party components that expect div
to have a different default value, it starts to cause problems - I need to spot fix any situations where this occurs.
Is there any workaround for this, such that components in my application get some default style, but it doesn't bleed into 3rd party stuff? I'm using styled-components
to apply styles, but the question could apply to other libraries.
If you can tag third party components with a class, say thirdParty
. Otherwise, if you can add a wrapper, with the tag, around third party components. Then you can use :not()
like this:
/* your local rules */
div:not(.thirdParty, .thirdParty *) {
width: 100%;
background-color: lightgreen;
text-align: center;
}
<div>local one</div>
<div class="thirdParty">third party Parent
<div>---third party child
<div>------third party grand child</div>
</div>
</div>
<div>local two</div>