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 有点臃肿，但你可以看到这个 SASS 的 HTML 看起来不错？

Answer 1

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

您可以使用以下选项来定义适用于嵌套在组件中的其他组件（如您的 Angular Material 组件）的样式：

• 将样式添加到您的全局 styles.scss 文件中
• 保留组件中的样式并关闭此组件的视图封装。
• 保留组件中的样式并使用不推荐使用穿透阴影的后代组合器来强制将样式应用于所有子元素。 （见下面的原始答案）

---

禁用视图封装

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

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

ViewEncapsulation.None 表示 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。范围界定 前面讨论的规则、隔离和保护不适用。这个 本质上与将组件的样式粘贴到 HTML。 Angular Docs

如果您关闭视图封装，请确保仅针对您真正想要的 html 元素，因为为该组件定义的样式现在适用于您的整个 Angular 应用程序（而不仅仅是一个组件）。 （例如，将自定义 class 或 id 添加到您的元素）

我发现当禁用 view encapsulation 时，您可能还必须在 CSS 中使用 !important 来覆盖现有的 Angular Material 样式，而 ::ng-deep 并不总是需要它。

---

使用::ng-deep

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

请注意，::ng-deep 当前为 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;
       }
  }
}

Answer 2

在你的 sass 中，你有

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

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

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

应该是（注意 mat-tab-group 之前的“.”）

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

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

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