如何根据body-tag中的类设置嵌套<div>的样式

Question

在我的<app-root> <app-sidebar>我有<div class="myClass">。 在我的身体标签中，我有课程＆＃34; myBodyClass＆＃34;切换。我想根据body-tag中的类来设置我的div样式，我有这样的东西：

.myClass{
  background-color:red;
}
.myBodyClass > .myClass{
  background-color:yellow;
}

尝试过：

 .myBodyClass .myClass{
  background-color:yellow;
 }

但它们都不起作用，获得这种方法的正确方法是什么？

Answer 1

您正在寻找的是host-context组合器

  

有时，根据组件视图之外的某些条件应用样式很有用。例如，CSS主题类可以应用于document元素，并且您希望根据该元素更改组件的外观。

https://angular.io/guide/component-styles#host-context

:host-context(.myBodyClass) myClass {
  background-color:yellow;
}

另一个解决方案是在全局样式表中声明该规则，而不是在组件'css中声明（因为默认封装）