css 覆盖样式取决于根类

ctzwtxfj 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(154)

我有一个问题，如何使用scss覆盖依赖于主类的样式。例如，我们有一个组件
app.component.html

<div [ngClass]="variable === 'mobile' ? 'container-fluid user' : 'container'"> 
  <child-component></app-components>
</div>

child-component.html

<h1 class="custom-heading">Test</h1>
...
<button class="main-btn"> Test </button>

因此，当根组件div具有类user时，情况是覆盖类custom-heading和main-btn。
我想根据变量名更改所有元素样式。

1条答案

需要在子样式文件中使用:host-context。
示例（scss）：

:host-context(.parent-class) {
 .custom-heading { ...some styles }
 .main-btn { ...some styles }
}