时间戳

首页 > 解决方案 > 如何强制 Angular 不封装嵌套规则？

angular - 如何强制 Angular 不封装嵌套规则？

问题描述

我对样式的标题部分有简单的要求mat-tab-group。以下规则适用更多然后罚款

   mat-tab-group.buttons-tab { 
      > .mat-tab-header {
        ... some more rules 
      }
  }

但是，这必须在全局 CSS 中完成，而我想将它封装在使用的组件中（因为这是唯一使用此自定义样式的地方）。Angular 正在封装buttons-tabclass ，但它.mat-tab-header也在封装。这种封装阻止了规则的应用，因为内部mat-tab-headers没有封装。关闭组件的封装不是一个选项，因为它包含更多需要封装的样式。

所以问题是

  1. 是否可以关闭嵌套规则的封装？
  2. 也许可以添加多个样式文件@Component并分别为每个文件设置封装。
  3. 使用全局样式（或关闭封装）是唯一可行的解​​决方案吗？

标签： angularangular-material

解决方案

在要防止视图封装的组件中，您可以放置​​代码（在 @Component 块内）：

   encapsulation: ViewEncapsulation.None

在此处阅读更多相关信息： https ://angular.io/guide/component-styles#view-encapsulation

推荐阅读