Angular - 将样式添加到 shadow-root 内的类答案

【问题标题】：Angular - add style to class inside shadow-rootAngular - 将样式添加到 shadow-root 内的类
【发布时间】：2020-12-14 20:21:34
【问题描述】：

这是浏览器呈现的内容：

元素super-tabs 是library。我想从根组件向.buttons-container 类添加样式这是我正在尝试的，但它不起作用：

@media (min-width: 768px) {
  :host ::ng-deep super-tabs-toolbar .buttons-container {
    margin: 0;
    padding-right: calc((100% - 1080px) / 2);
    padding-left: calc((100% - 1080px) / 2);
  }
}

【问题讨论】：

你在 styles.css 中尝试这个吗？
是的，我正在使用 scss

标签： css angular sass styles shadow-dom

【解决方案1】：

添加!important 以覆盖现有的css 属性，如下所示：

@media (min-width: 768px) {
  :host ::ng-deep super-tabs-toolbar .buttons-container {
    margin: 0 !important;
    padding-right: calc((100% - 1080px) / 2) !important;
    padding-left: calc((100% - 1080px) / 2) !important;
  }
}

【讨论】：

谢谢，但这不是问题所在。我在应用程序的其他部分使用了 selector : host :: ng-deep 并且它可以工作，但从不在 shadow-root 中引用，这是正确的方法吗？
这取决于谁支持::ng，bootstrap 支持。最好的方法是直接在 gihub 存储库中询问。
库需要支持ng-deep吗？还有其他方法可以覆盖子组件样式吗？
尝试不使用:host 和::ng-deep。它应该工作
它也不起作用。我对样式知之甚少，但我认为它与 shadow-root 内部的内容有关？