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

Posted 2023-02-21

【中文标题】我可以仅将样式应用于我的应用程序组件吗？

【英文标题】：Can I apply a style only to my applications components?

【发布时间】：2022-01-10 07:03:14

【问题描述】：

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

  div 
    width: 100%;
  

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

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

【问题讨论】：

您标记了您的问题shadow-dom。 shadowDOM 内部的<div>s 永远不会被全局 CSS 样式化。这就是 shadowDOM 的主要目的。

【参考方案1】：

如果您可以使用类标记第三方组件，请说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>