角度：重写嵌套组件的scss样式

Question

我创建了一个微调器组件。我希望它是自包含的，而不是依赖于外部CSS，因此在组件中，我包括了对其进行样式设置的scs。组件模板是一个具有{ this.state.todo.map(value => <p key={value}>{value}</p>) } 类的div。我可以在应用程序中的任何位置添加它，并且它可以按设计工作。

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

因此，我正在尝试使用按钮组件的scss重新为微调框上色。到目前为止，唯一可行的方法就是我可以

sbl-circ

我知道:host ::ng-deep { button.btn.btn-primary { .sbl-circ { color: white; } } } 已过时。按钮组件重新着色插入其中的所有微调器组件的正确方法是什么？

Answer 1

尝试使用:host-context。

您应该能够像这样使用它：

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

Answer 2

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

p {
    color: red !important;
}