我的<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/