Angular：覆盖嵌套组件的scss样式答案

【问题标题】：Angular: override scss styles of nested componentAngular：覆盖嵌套组件的scss样式
【发布时间】：2020-02-01 03:50:44
【问题描述】：

我创建了一个微调器组件。我希望它是独立的，不依赖于外部 css，所以在组件中我包含 css 来设置它的样式。组件模板是一个类为sbl-circ 的div。我可以在我的应用中的任何地方添加它，它可以按设计工作。

现在，我创建了第二个组件（一个按钮）。我想将微调器组件添加到此按钮。它可以工作，但是当它在按钮内部时，微调器颜色不正确。

所以，我正在尝试使用按钮组件的 scss 重新着色微调器。到目前为止，唯一可行的方法是我这样做

:host ::ng-deep {
  button.btn.btn-primary {
    .sbl-circ {
      color: white;
    }
  }
}

我知道::ng-deep 已被弃用。按钮组件重新着色插入其中的任何微调器组件的正确方法是什么？

【问题讨论】：

stackoverflow.com/questions/47024236/… 看看用什么代替::ng-deep。我在该链接中的答案有效，但我宁愿使用您的答案。继续使用::ng-deep，一旦弃用，就会有替代品。我认为您的解决方案是最好的方法。
不确定是否能解决问题，但关闭父组件的视图封装可能会起作用
您能否提供标记和/或组件架构。或者可能是堆栈闪电战？

【解决方案1】：

尝试使用:host-context。

你应该可以像这样使用它：

:host-context(button.btn.btn-primary) .sbl-circ {
  color: white;
}

【讨论】：

【解决方案2】：

请原谅我对角度不熟悉。但是，如果我要尝试生成的 css 不被另一种样式覆盖，我会尝试使用 !important 作为 scss 中的属性值。
示例：

p {
    color: red !important;
}

【讨论】：