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

Question

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

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

因此，我正在尝试使用按钮组件的 scss 为微调器重新着色。 到目前为止，它唯一有效的方法是如果我这样做

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

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

Answer 1

尝试使用:host-context 。

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

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

Answer 2

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

p {
    color: red !important;
}