Angular中无法通过CSS自定义mat-tab与mat-ink-bar样式问题

我太懂这种挫败感了——浏览器开发者工具里改得好好的样式，一写进组件CSS就完全失效，本质是Angular的**视图封装（ViewEncapsulation）**在搞鬼。默认情况下，Angular会给组件的CSS添加独特的属性选择器（比如[_ngcontent-xxx]），而mat-tab-header、mat-ink-bar这些元素属于Angular Material组件的内部DOM，不在当前组件的封装范围内，所以你的本地样式根本选不到它们。

下面给你几个靠谱的解决方案，按推荐程度排序：

1. 使用 ::ng-deep 穿透样式（最常用） #

::ng-deep 可以打破Angular的视图封装，让你的样式渗透到子组件的DOM元素上。为了避免污染全局样式，一定要配合 :host 限定作用域，确保样式只作用于当前组件的Tab：

/* 自定义tab头部样式 */
:host ::ng-deep .mat-tab-header {
  background-color: #f0f0f0;
  padding: 0 16px;
}

/* 自定义ink bar（选中状态下划线）样式 */
:host ::ng-deep .mat-ink-bar {
  background-color: #2196f3;
  height: 4px;
  border-radius: 2px;
}

• :host 表示样式只应用于当前组件的宿主元素及其内部
• ::ng-deep 让样式穿透到Material组件的内部DOM结构

2. 关闭当前组件的视图封装 #

如果不想用::ng-deep，可以在组件元数据里关闭ViewEncapsulation。但要注意：此时组件的CSS会变成全局样式，所以一定要给组件加一个独特的类名，避免影响其他组件：

首先在组件的ts文件里修改配置：

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

@Component({
  selector: 'app-my-custom-tab',
  templateUrl: './my-custom-tab.component.html',
  styleUrls: ['./my-custom-tab.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class MyCustomTabComponent { }

然后在CSS里用组件的选择器限定范围：

/* 用组件的选择器包裹，确保样式只作用于当前组件内的Tab */
app-my-custom-tab .mat-tab-header {
  background-color: #f0f0f0;
}

app-my-custom-tab .mat-ink-bar {
  background-color: #2196f3;
  height: 4px;
}

3. 写入全局样式文件（不推荐，除非要全局统一修改） #

如果你想让项目中所有MatTab都用这个样式，可以把代码写在src/styles.css（或styles.scss）里。但这样会影响整个项目的Tab组件，只适合全局统一样式的场景：

.mat-tab-header {
  background-color: #f0f0f0;
}

.mat-ink-bar {
  background-color: #2196f3;
  height: 4px;
}

为什么浏览器开发者工具能直接修改生效？ #

因为DevTools直接操作的是最终渲染到页面上的原始DOM元素，不受Angular视图封装的属性选择器限制，你修改的是元素的“裸”样式，自然能立刻看到效果。

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