我的<app-root>中有一个<app-sidebar>,其中有一个<div class="myClass">
在我的身体标签中,有一个可切换的类“ myBodyClass”。我想根据body-tag中的类设置div的样式,我的东西是这样的:

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


也尝试过:

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


但是它们都不起作用,实现该目标的正确方法是什么?

最佳答案

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


  有时根据组件视图外部的某些条件应用样式很有用。例如,可以将CSS主题类应用于文档元素,然后您要根据此元素更改外观。


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

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


另一种解决方案是在全局样式表中声明该规则,而不是在组件的CSS中声明该规则(由于默认封装)

关于html - 如何根据body-tag中的类设置嵌套<div>的样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49585914/

10-12 12:21
查看更多