使用scss的子組件中的后代元素不會繼承父類

Question

我有一個父組件，其父類是通過指令設置的（我根據用戶輸入給我一個主題）。

在子組件的SCSS樣式中，即使引用父類的最簡單的規則也無效。 我閱讀了有關陰影穿刺的ViewEncapsulation ，並在父組件ViewEncapsulation設置為None ，但是由於我確定有些ViewEncapsulation而無法使它正常工作。

app.component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}

app.component.html

<div appTheme> <---- This one generates: class="theme-snow-cherry" (for example)
  <router-outlet></router-outlet>
</div>

ribbon.component.scss （子組件）

.theme-snow-cherry div {
  background-color: red;
}

注意：如果我在app.component.css添加上述樣式，它將為我提供結果，但顯然不是我要放置樣式的地方。

Answer 1

由於您是在子組件中定義樣式的，因此應在該組件中將封裝設置為ViewEncapsulation.None ：

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class RibbonComponent {
  ...
}

否則，生成的類樣式具有特定於子組件的屬性，這會阻止選擇器.theme-snow-cherry與父組件中的div元素匹配：

.theme-snow-cherry[_ngcontent-c2] div[_ngcontent-c2] {
  background-color: red;
}