如何自定义Mat-Tabs？求非激活标签背景色设置及完整CSS变量列表

我尝试自定义非激活状态Mat-Tabs的颜色，但未找到适用的官方文档规则，过往方案已过时无法适配当前场景。找到如下CSS规则并生效，但未发现修改非激活标签背景色的规则，请问如何获取完整的CSS变量列表？

.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
  --mat-tab-header-active-focus-label-text-color: #151414;
  --mat-tab-header-active-label-text-color: #151414;
  --mat-tab-header-inactive-label-text-color: rgb(0 0 0 / 60%);
  --mat-tab-header-inactive-focus-label-text-color: rgb(236 131 218 / 60%);
  --mat-tab-header-inactive-hover-label-text-color: rgb(236 131 218 / 60%);
  --mdc-tab-indicator-active-indicator-color: #242022;
  --mat-tab-header-active-hover-label-text-color: #5052c3;
  --mat-tab-header-active-ripple-color: #c2185b;
  --mat-tab-header-inactive-ripple-color: #232222;
}

1. 浏览器开发者工具直接提取 #

打开浏览器DevTools（快捷键F12），选中非激活状态的Mat-Tab元素，在样式面板中展开所有--mat-*和--mdc-*开头的CSS变量，就能看到当前组件生效的全部变量，包括背景色相关的（比如--mat-tab-header-inactive-tab-background-color或--mdc-tab-color这类）。

2. 查看Angular Material组件源码 #

直接查阅Mat-Tabs组件的源码文件：

• 找到tab-header.scss或mdc-tab.scss这类样式文件，里面会完整列出所有控制Tab样式的CSS变量定义，涵盖背景色、文本色、交互状态等所有维度。
• 针对非激活标签背景色，通常会有--mat-tab-header-inactive-tab-background-color这类变量，直接在你的CSS规则中添加并赋值即可生效。

3. 参考MDC Web基础变量 #

Angular Material的MDC系列组件基于MDC Web实现，两者的CSS变量大多通用。可以直接查看MDC Tab组件的变量定义，其中控制非激活Tab背景的变量通常为--mdc-tab-color。

补充：直接覆盖样式的备选方案 #

如果暂时找不到对应CSS变量，也可以通过元素选择器直接覆盖样式（注意提升优先级确保生效）：

.mat-mdc-tab-group .mdc-tab--unselected {
  background-color: #your-target-color;
}

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