SASS子选择器未找到其目标

Question

好的，所以我有以下HTML（通过角度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被击中并因此被隐藏。

我只是涉猎SASS，请问有人可以看到我做错了吗？ 更新：请看下面的图片，HTML中的内容有些膨胀，但是您可以看到HTML对于该SASS来说还可以吗？

Answer 1

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

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

• 将样式添加到全局styles.scss文件中
• 保留组件中的样式，然后关闭该组件的 view封装。
• 将样式保留在组件中，并使用已弃用的阴影刺穿后代组合器将样式强制应用于所有子元素。 （请参见下面的原始答案）

我更喜欢禁用视图封装。

禁用视图封装

在使用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封装时，您可能还必须在CSS中使用!important来覆盖现有的Angular Material样式，而{{ 1}}。

---

原始

：

尝试将::ng-deep放在父选择器之前。

::ng-deep

  

请注意，{<3>}当前已被弃用。

Answer 2

在你的无聊之中

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;
       }
  }