使用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;
}