如何按角度设置封装的子零部件的样式

Question

如何在angular中设置封装的子组件的样式？

以下是启用了视图封装的子组件和父组件。

** child
//template
<div class="child-container"> </div>
// class
@Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"],
encapsulation: ViewEncapsulation.ShadowDom
})

** parent
//template
<div class="parent-container"> </div>
// class
@Component({
selector: "app-parent",
templateUrl: "./parent.component.html",
styleUrls: ["./parent.component.css"],
encapsulation: ViewEncapsulation.ShadowDom
})

如何从父组件的样式表中选择Child组件内的特定类并更改其样式？

** parent
//template
<div class="parent-container">
<app-child></app-child>
</div>
// class
@Component({
selector: "app-parent",
templateUrl: "./parent.component.html",
styleUrls: ["./parent.component.css"],
encapsulation: ViewEncapsulation.ShadowDom
})
//styles
app-child {
.child-container {
background colour: red;
}
}

当前，当我尝试从子组件中选择一个类时，我无法覆盖它的样式。请帮忙

请记住，ViewEncapsulation.ShadowDom是我的用例所必需的。所以我们必须牢记这一点。

Answer 1

css变量可通过shadow dom访问。。因此，在你的应用程序父组件scs中，你应该能够做一些类似的事情

--child-comp-background: red;

以及应用程序中的子组件scs、

background-color: var(--child-comp-background, white) //white is a default incase the variable isnt defined or passed down from the parent

Answer 2

您可以使用：host-concontext((来执行

:host-context(.parent-container) .child-container{
...style here
}

这里的演示：演示