Search code examples
cssstyled-componentsshadow-dom

Can I apply a style only to my applications components?


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.


Solution

  • 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>