如何阻止全局样式影响我的组件

Question

有没有办法将我的 Angular 组件与全局样式表隔离？我不希望全局样式表中的样式在我的组件内生效。

我试过这个

.reset {
  all: initial;
  * {
    all: unset;
  }
}

但没有不同的方式吗？

Answer 1

在您的组件装饰器中，添加：

@Component({
    selector: '..',
    templateUrl: '..',
    styleUrls: ['..'],
    encapsulation: ViewEncapsulation.ShadowDom 
})

这将创建一个 Shadow dom 并强制您的组件仅使用提供的 styles/styleUrls 数组中的样式。

如果您使用的是 Angular 版本 < v6.1.0。您可以使用ViewEncapsulation.Native。此后它已被弃用。