Angular Material自定义Tabs样式不生效，如何用CSS修改？

Angular的视图封装机制会限制组件内样式的作用范围，加上Angular Material版本迭代（尤其是v15+切换到MDC底层）带来的DOM结构变化，是导致样式不生效的核心原因。以下是几种可行的解决方案：

1. 使用::ng-deep穿透样式（推荐） #

无需关闭视图封装，通过:host ::ng-deep组合限定样式仅作用于当前组件内部的Material元素，避免全局样式污染：

/* 自定义标签栏背景 */
:host ::ng-deep .mat-tab-group.mat-primary .mat-tab-header {
  background-color: #f5f5f5;
}

/* 激活标签的文字样式 */
:host ::ng-deep .mat-tab-label-active {
  color: #1976d2;
  font-weight: 600;
}

/* 调整标签图标大小 */
:host ::ng-deep .example-tab-icon {
  font-size: 22px;
  margin-right: 8px;
}

2. 关闭组件视图封装（按需使用） #

在组件TS文件中关闭视图封装，让组件内CSS全局生效，注意仅适合单个组件的特殊样式需求，避免样式冲突：

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

@Component({
  selector: 'app-your-tab-component',
  templateUrl: './your-tab-component.component.html',
  styleUrls: ['./your-tab-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourTabComponentComponent { }

之后在组件CSS中直接编写Material样式即可，比如：

.mat-tab-group.mat-primary .mat-tab-header {
  border-bottom: 1px solid #eee;
}

3. 适配Angular Material版本的选择器 #

如果是版本升级导致旧样式失效，重点检查DOM结构变化：

• Angular Material v15及以上版本全面采用MDC架构，组件类名从mat-前缀变为mat-mdc-或mdc-前缀，比如标签栏容器类从mat-tab-group变为mat-mdc-tab-group，激活标签类从mat-tab-label-active变为mdc-tab--active。
• 通过浏览器开发者工具（F12）查看标签页元素的实际类名，针对性编写样式：

:host ::ng-deep .mat-mdc-tab-group .mat-mdc-tab-header {
  background-color: #f0f0f0;
}

:host ::ng-deep .mdc-tab--active .mdc-tab__icon {
  color: #d32f2f;
}

4. 全局样式文件定义（通用样式） #

如果需要全局统一Material标签样式，直接在项目根目录的styles.css/styles.scss中编写，无需穿透：

.mat-mdc-tab-group .mat-mdc-tab-header {
  padding: 0 16px;
}

.example-tab-icon {
  margin-right: 6px;
}

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