我可以只将样式应用于我的应用程序组件吗？

Question

所以我想为我的整个应用程序做一些事情，比如

  div {
    width: 100%;
  }

这很好用。但是，一旦我开始包含期望 div 具有不同默认值的第 3 方组件，它就会开始引起问题 - 我需要修复发生这种情况的任何情况。

对此是否有任何解决方法，以便我的应用程序中的组件获得一些默认样式，但它不会渗入第 3 方的东西？我正在使用 styled-components 来应用样式，但这个问题可能适用于其他库。

Answer 1

如果您可以使用 class 标记第三方组件，请说 thirdParty。否则，如果您可以在第三方组件周围添加带有标签的包装器。然后你可以像这样使用:not()：

/* 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>

我可以只将样式应用于我的应用程序组件吗？

Can I apply a style only to my applications components?

css

shadow-dom

styled-components