如何为Angular Material Tabs实现组件级局部样式？

不用让:ng-deep样式全局生效，有几种靠谱的局部修改方式：

1. 结合 :host 限定 ::ng-deep 的作用域 #

这是最常用的方式，:host 代表当前组件的宿主元素，把 ::ng-deep 嵌套在里面，样式只会穿透到当前组件内部的 mat-tab，不会影响全局其他组件：

:host ::ng-deep .mat-tab-label {
  background-color: #f0f0f0;
  color: #333;
}

2. 关闭组件视图封装 + 自定义唯一类名 #

给组件添加一个唯一的类名，同时关闭视图封装，这样写的样式只会作用在当前组件内的元素上：

• 组件 TS 配置：

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

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

• 组件 HTML 根元素加唯一类：

<div class="custom-tab-container">
  <mat-tab-group>
    <mat-tab label="Tab 1">内容1</mat-tab>
    <mat-tab label="Tab 2">内容2</mat-tab>
  </mat-tab-group>
</div>

• 组件 CSS 样式：

.custom-tab-container .mat-tab-label {
  padding: 0 20px;
  font-weight: bold;
}

3. 组件级覆盖 Material 主题变量（针对主题相关样式） #

如果是修改颜色、字体这类和 Material 主题挂钩的样式，可以在组件 SCSS 里局部覆盖主题变量，不需要用样式穿透：

@import '~@angular/material/theming';

// 定义局部主题变量
$custom-tab-primary: mat-palette($mat-blue);
$custom-tab-accent: mat-palette($mat-orange);
$custom-tab-theme: mat-light-theme($custom-tab-primary, $custom-tab-accent);

// 应用局部主题到当前组件的 mat-tab
@include angular-material-theme($custom-tab-theme);

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