Question

此处an example引入了常规Materialise 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封装，角度会将某些属性添加到模板中的所有元素。

例如，以下模板

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

becames

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

becames

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

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

使用“阴影穿孔”CSS组合器或具有styles|styleUrls属性之外的样式应该可以解决它。

Answer 2

使用/ deep /，＆gt;＆gt;＆gt;和:: ng-deep使用模拟视图封装。模拟是默认和最常用的视图封装.Angular支持3种类型的视图封装1.Native：视图封装使用浏览器本机shadow DOM。 2.Emulated（默认）：通过重命名css类来模拟shadow DOM的行为，并有效地将CSS范围限定在组件的视图中。 3.None：Angular没有查看封装。 Angular将CSS添加到全局样式中。类似于粘贴html中的组件样式您可以通过在组件中添加encapsultion来设置视图封装。例如： -

@Component({
  selector: 'hero-team',
  template: ``,
  encapsulation: ViewEncapsulation.None

})

使用Angular 4和Materialize进行CSS封装

2 个答案: