Angular 4 和 Materialise 的 CSS 封装

Question

这是 an example引入了常规 Materialize select 和 Angular Materialize 组件:

@Component({
  selector: 'my-app',
  styles: [`
.select-wrapper {
  background-color: red;
}
  `],
  template: `
    <div class="row">
       <div class="col s6">
        <select materialize="material_select">
            <option>...</option>
        </select>
       </div>

       <div class="col s6">
        <select class="non-angular-materialize">
            <option>...</option>
        </select>
       </div>
    </div>
  `,
})
export class App {
  ngOnInit() {
     $('.non-angular-materialize').material_select();
  }
}

未应用样式。

尽管same example与 /deep/ 一起工作，这违背了组件的目的:

:host /deep/ .select-wrapper {
  background-color: red;
}

为什么会这样？是否可以在给组件模板元素设置样式时，保持CSS封装，避免/deep/？这个问题是 Materialise 特有的吗？

Answer 1

ViewEncapsulation.Emulated 默认使用。

为了模拟 css 封装，angular 为模板中的所有元素添加了一些属性。

例如下面的模板

<div class="col s6">
  <select materialize="material_select">
    <option>...</option>
  </select>
</div>

成为

<div _ngcontent-c0="" class="col s6">
  <select _ngcontent-c0="" materialize="material_select">
    <option _ngcontent-c0="">...</option>
  </select>
</div>

c0 是您组件的唯一 ID。

除了覆盖模板之外，angular 还根据 styles|styleUrls 内容创建特定的 css 选择器。

所以

.select-wrapper {
  background-color: red;
}

成为

.select-wrapper[_ngcontent-c0] {
  background-color: red;
}

最终 CSS 未应用，因为您动态添加的 HTML(在运行插件后)没有应用属性 _ngcontent-c0

使用“阴影穿刺”CSS 组合器或在 styles|styleUrls 属性之外使用样式应该可以解决这个问题。