Question

是否可以将Angular组件与全局样式表隔离？我不希望全局样式表中的样式在组件内部生效。

我已经尝试过了

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

但是没有其他方法吗？

Answer 1

这是不可能的。实现此目的的唯一方法是覆盖组件样式表中全局样式表中定义的规则。

Answer 2

尝试一下，它必须可以工作：

:host ::ng-deep .reset{

  //your style
}

Answer 3

这应该是可能的，因为Angular为样式表提供了层次结构，其中全局样式表位于一切之上。

但是可以通过在装饰器“ @component”内部向组件的元数据添加“ encapsulation：ViewEncapsulation.None”来将您的组件从此层次结构中排除。

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

但是以这种方式，您排除了该组件中的所有内容不受全局样式表的影响。

您可以将另一种方法设置为覆盖所有全局规则的“！important”

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

如果我记得很好，即使定义一个css id选择器而不是css类，您也可以解决此问题，所以它就像（不确定）

#reset {
  all: initial !important;
  * {
    all: unset !important;
  }
}

Answer 4

在组件模板启动时添加以下带有重置类的代码。

.reset {
* {
    all: unset !important;
}
}

Answer 5

在组件装饰器中，添加：

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

这将创建一个阴影dom，并迫使您的组件仅使用提供的styles / styleUrls数组中的样式。

如果使用的是角度版本

Answer 6

用名称本身来表示这些样式在受影响的所有组件中是全局的。这是CSS的典型行为，每当遇到一个元素时，它将为该元素应用所有已定义的css规则。使用Angular的默认视图封装策略，您可以在组件样式中覆盖这些样式。

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

6 个答案: