angular - SASS 子选择器找不到它的目标

Question

好的，所以我有以下 HTML(通过 angular 6)

<mat-tab-group class="mat-tab-group is-third-party">
<mat-tab-header class="mat-tab-header">

然后我尝试使用以下 SASS

 mat-tab-group {
      background-color: yellow;
      height: 100%;
      display: inherit; 

      &.is-third-party {
           background-color: blue;

           mat-tab-header {
                display: none !important;
           }
      }

直到 isThirdParty 一切正常(我得到了我添加的蓝色背景以查看到底发生了什么)

我已经尝试了各种组合来让 mat-tab-header 被击中，但它没有。我试过了 。对于类名、子选择器 > 以及无论我做什么，我都不会命中 mat-tab-header 并因此被隐藏。

我只接触过 SASS，有人能看出我做错了什么吗？更新:看我下面的图片，html 有点膨胀，但您可以看到 HTML 看起来适合这个 SASS 吗？

Answer 1

由于 Angular 的 style scoping feature，您的样式不适用于嵌套在 Angular 组件中的 Angular Material 组件。 .默认情况下，组件样式不会被嵌套在组件模板中的任何组件继承。

您可以使用以下选项来定义应用于嵌套在组件中的其他组件(例如 Angular Material 组件)的样式:

• 将样式添加到您的全局 styles.scss 文件
• 保留组件中的样式并关闭此组件的 View 封装。
• 将样式保留在您的组件中并使用已弃用 shadow-piercing 后代组合器强制将样式应用于所有子元素。 (请参阅下面的原始答案)

---

禁用 View 封装

在使用 Angular Material 组件的组件上禁用 View 封装。

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

ViewEncapsulation.None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML. Angular Docs

如果您关闭 View 封装，请确保只定位您真正想要的 html 元素，因为为该组件定义的样式现在适用于您的整个 Angular 应用程序(而不仅仅是一个组件)。 (例如，向您的元素添加自定义 class 或 id)

我发现当禁用 View 封装时，您可能还必须在您的 CSS 中使用 !important 来覆盖现有的 Angular Material 样式，但并非总是如此需要 ::ng-deep。

---

使用::ng-deep

将 ::ng-deep 放在父级选择器的前面。

Note that ::ng-deep is currently deprecated.

::ng-deep mat-tab-group {
  background-color: yellow;
  height: 100%;
  display: inherit; 

  &.is-third-party {
       background-color: blue;

       mat-tab-header {
            display: none !important;
       }
  }
}