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

Your styles don't apply to the Angular Material components nested in your Angular component because of Angular's style scoping feature. By default component styles are not inherited by any components nested within your component's template.

You have the following options to define styles that apply to other components nested within a component (like your Angular Material components):

• Add the styles to your global styles.scss file
• Keep the styles in your component and turn off view encapsulation for this component.
• Keep the styles in your component and use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child elements. (see original answer below)

Disabling View Encapsulation

Disable view encapsulation on your components that use Angular Material components.

@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

If you turn off view encapsulation make sure to target only the html element you realy want, because the styles defined for this component now apply to your whole Angular app (not just the one component). (e.g. add a custom class or id to your element)

I've found that when disabling view encapsulation you might also have to use !important in your CSS to overwrite existing Angular Material styles, while it wasn't always needed with ::ng-deep.

Using ::ng-deep

Put ::ng-deep in front of your your parent selector.

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