如何用CSS定位Angular激活标签并解决样式失效问题？

问题根源 #

Angular默认启用视图封装（View Encapsulation），组件内的CSS仅作用于组件内部DOM元素。而mdc-tab--active、mat-mdc-tab-disabled是Angular Material动态添加到组件外部容器上的类，组件内的样式无法穿透到这些外部容器的子节点（即你的mat-icon元素）。单独设置.lockopen生效，是因为这个类直接绑定在组件内的元素上，但组合选择器因父元素在封装边界外，所以无法生效。

可行解决方案 #

方法1：用::ng-deep穿透样式 #

在组件CSS中通过::ng-deep打破视图封装，让样式能作用到外部父元素的子节点。建议配合:host限制作用范围，避免污染全局样式：

:host ::ng-deep .mdc-tab--active .lockclosed {
  display: none;
}

:host ::ng-deep .mat-mdc-tab-disabled .lockopen {
  display: none;
}

方法2：将样式移至全局样式文件 #

把CSS规则放到项目根目录的styles.css（或styles.scss）中，全局样式不受视图封装限制，可直接作用于所有DOM元素：

.mdc-tab--active .lockclosed {
  display: none;
}

.mat-mdc-tab-disabled .lockopen {
  display: none;
}

注意：这种方式要避免和其他组件的样式冲突，可给图标类加更具体的前缀。

方法3：关闭组件的视图封装 #

在组件装饰器中关闭视图封装，让组件内的CSS变为全局样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑
}

关闭后原CSS即可生效，但需注意样式污染，建议给组件内元素添加唯一类名缩小作用范围。

额外优化方案 #

无需同时渲染两个图标，可通过模板变量直接绑定标签状态切换图标，更简洁高效：

<mat-tab [disabled]="false" #tab>
  <ng-template mat-tab-label>
    <mat-icon class="example-tab-icon">{{ tab.isActive ? 'lock_open' : 'lock' }}</mat-icon>
    Title
  </ng-template>
  <ng-container>Contents</ng-container>
</mat-tab>

<mat-tab [disabled]="true" #tab>
  <ng-template mat-tab-label>
    <mat-icon class="example-tab-icon">{{ tab.disabled ? 'lock' : 'lock_open' }}</mat-icon>
    Title
  </ng-template>
  <ng-container>Contents</ng-container>
</mat-tab>

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