Angular 16中如何自定义mat-tab-group的背景颜色？

一、扩展ThemePalette添加自定义调色板选项 #

如果想沿用Material的主题系统，添加primary-light这类自定义调色板值，可以按以下步骤操作：

1. 定义扩展的调色板类型
   在项目中创建一个类型文件（比如src/app/types.ts），扩展原生的ThemePalette：

import { ThemePalette } from '@angular/material/core';

export type ExtendedThemePalette = ThemePalette | 'primary-light' | 'accent-dark';

2. 在自定义主题中添加对应颜色
   打开你的主题样式文件（比如src/styles.scss或自定义的theme.scss），将自定义颜色加入主题调色板：

// 基于Material原生调色板创建自定义色调
$custom-primary-light: mat.define-palette(mat.$indigo-palette, 100);
$custom-accent-dark: mat.define-palette(mat.$pink-palette, 800);

// 定义完整主题，包含自定义颜色
$custom-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    'primary-light': $custom-primary-light,
    'accent-dark': $custom-accent-dark,
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
));

// 应用主题到所有Material组件
@include mat.all-component-themes($custom-theme);

3. 在组件中使用扩展类型
   在组件类中导入扩展后的类型，并绑定到mat-tab-group的backgroundColor属性：

import { Component } from '@angular/core';
import { ExtendedThemePalette } from './types';

@Component({
  selector: 'app-tab-example',
  templateUrl: './tab-example.component.html',
  styleUrls: ['./tab-example.component.scss']
})
export class TabExampleComponent {
  tabBgColor: ExtendedThemePalette = 'primary-light';
}

模板中使用：

<mat-tab-group [backgroundColor]="tabBgColor">
  <mat-tab label="Tab 1">内容1</mat-tab>
  <mat-tab label="Tab 2">内容2</mat-tab>
</mat-tab-group>

二、通过CSS直接修改背景色 #

如果不需要扩展主题系统，直接用CSS修改更快捷，解决::ng-deep失效的问题可以用以下两种方式：

方式1：关闭组件样式隔离 #

在组件类中设置ViewEncapsulation.None，这样组件内的样式可以直接作用到Material组件：

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

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

然后在组件的SCSS文件中编写样式：

// 修改标签头部背景
.mat-tab-group .mat-tab-header {
  background-color: #e8f0fe; /* 替换成你需要的颜色值 */
}

// 修改标签内容区域背景（可选）
.mat-tab-group .mat-tab-body-wrapper {
  background-color: #f5f7fa;
}

方式2：使用全局样式+自定义类 #

在全局样式文件（比如src/styles.scss）中添加样式，给mat-tab-group指定自定义类来避免样式污染：

.custom-tab-header-bg .mat-tab-header {
  background-color: #e8f0fe;
}

模板中给mat-tab-group添加类：

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

注：::ng-deep在Angular中已处于废弃状态，不推荐使用，优先选择上述两种方式实现样式自定义。

内容的提问来源于stack exchange，提问作者Sadikul Haque Sadi