Angular V15中mat-tab激活标签样式修改失效求助

Angular Material 15完成了基于MDC（Material Design Components）的重构，原有的mat-tab相关样式类名已被替换，导致你之前的代码无法生效。以下是几种可行的解决方式：

• 使用新的MDC类名并穿透视图封装
  组件内的SCSS可以通过:host ::ng-deep穿透默认的视图封装，匹配新的MDC类名：

  :host ::ng-deep .mdc-tab-bar .mdc-tab--active {
    background-color: #your-target-color;
  }
  

• 关闭组件视图封装
  在组件的装饰器中关闭视图封装，这样组件内的样式可以直接作用到子组件元素：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'your-component-selector',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponent { }
  

  然后在SCSS中直接写：

  .mdc-tab-bar .mdc-tab--active {
    background-color: #your-target-color;
  }
  

  注意：关闭视图封装后，组件样式会全局生效，需避免和其他组件样式冲突。

• 在全局样式文件中定义
  直接在项目根目录的styles.scss（或指定的全局样式文件）中添加样式：

  .mdc-tab-bar .mdc-tab--active {
    background-color: #your-target-color;
  }
  

  这种方式无需处理视图封装，但同样要注意样式的作用范围，防止意外影响其他mat-tab组件。

内容的提问来源于stack exchange，提问作者yafit