Angular Material Tab自定义（基于类）及已实现代码说明

分享一下我搞定的Angular Material标签（mat-tab）自定义样式，能让整个标签栏呈现干净的纯白视觉效果，代码如下：

.mat-tab-label { 
  font-weight: 300; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; 
  color: white !important; 
  font-size: 18px; 
  opacity: 1 !important; 
} 

.mat-tab-link { 
  color: white !important; 
} 

.mat-ink-bar { 
  background-color: white !important; 
} 

.mat-tab-label-active { 
  font-weight:300; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; 
  color:white !important; 
  /* 可根据需求补充剩余样式属性 */
}

各部分样式的作用说明：

• .mat-tab-label：统一配置所有标签的字体（系统无衬线字体）、字号、白色文字，强制取消非活跃标签的半透明效果
• .mat-tab-link：确保标签关联的链接文字也显示白色
• .mat-ink-bar：将标签下方的激活状态指示器设置为白色
• .mat-tab-label-active：让活跃标签保持和普通标签一致的白色字体样式，避免默认的高亮差异

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