Angular中如何通过代码动态设置激活态Mat Tab的背景色？

方案一：利用CSS变量动态更新（推荐） #

你原来的代码已经用到了CSS变量--user-main-color，这种方式最适合做动态样式，只需要在获取后端颜色后更新这个变量的值，激活态标签的样式会自动生效，无需修改原SCSS代码。

步骤1：组件内获取后端颜色并更新CSS变量 #

在组件类中调用接口拿到颜色后，通过DOM操作更新CSS变量：

import { Component, OnInit } from '@angular/core';
import { ColorConfigService } from './your-color-service.service'; // 替换成你的接口服务

@Component({
  selector: 'app-tab-container',
  templateUrl: './tab-container.component.html',
  styleUrls: ['./tab-container.component.scss']
})
export class TabContainerComponent implements OnInit {
  private userMainColor: string = '#1976d2'; // 默认蓝色，和Mat原生主题一致

  constructor(private colorService: ColorConfigService) {}

  ngOnInit(): void {
    // 调用后端接口获取颜色配置
    this.colorService.getActiveTabColor().subscribe((color) => {
      this.userMainColor = color;
      // 更新全局CSS变量，作用于整个应用的Mat Tab
      document.documentElement.style.setProperty('--user-main-color', this.userMainColor);
      
      // 如果只想让当前组件的Tab生效，替换成下面的代码（需要注入ElementRef）
      // import { ElementRef } from '@angular/core';
      // constructor(private el: ElementRef) {}
      // this.el.nativeElement.style.setProperty('--user-main-color', this.userMainColor);
    });
  }
}

步骤2：保留原SCSS代码 #

你的SCSS代码不需要改动，依然使用CSS变量：

::ng-deep .mat-tab-label.mat-tab-label-active {
  background-color: var(--user-main-color);
  font-weight: 900;
}

方案二：使用@HostBinding绑定组件级CSS变量 #

如果不想污染全局样式，可通过@HostBinding给当前组件宿主元素绑定CSS变量，确保样式只作用于当前组件的Tab：

组件类修改： #

import { Component, OnInit, HostBinding } from '@angular/core';
import { ColorConfigService } from './your-color-service.service';

@Component({
  selector: 'app-tab-container',
  templateUrl: './tab-container.component.html',
  styleUrls: ['./tab-container.component.scss']
})
export class TabContainerComponent implements OnInit {
  @HostBinding('style.--user-main-color') activeTabColor?: string;

  constructor(private colorService: ColorConfigService) {}

  ngOnInit(): void {
    this.colorService.getActiveTabColor().subscribe((color) => {
      this.activeTabColor = color;
    });
  }
}

SCSS代码保持不变 #

同样使用原来的::ng-deep代码即可，此时CSS变量只在当前组件范围内生效。

为什么不能直接用[style.background-color]？ #

Mat Tab的标签页是组件内部封装的元素（.mat-tab-label），我们无法在模板中直接对激活态的标签元素绑定样式，只能通过CSS变量、动态修改样式规则这类间接方式来实现。

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