如何修改Angular项目中TaigaUI的tui-tabs组件颜色主题

是Taiga UI组件库的标签页组件，你可以通过以下两种方式修改其背景色、激活态样式：

方式1：CSS变量覆盖（最便捷，支持全局/局部修改） #

组件内置了可直接覆盖的CSS样式变量，你可以根据需求选择全局生效或者仅单个组件生效：

• 整个tabs容器的背景色变量：--tui-tabs-background
• 激活态标签的背景色变量：--tui-tab-active-background
• 激活态标签的文字颜色变量：--tui-tab-active-text-color
• 激活态标签底部指示器的颜色变量：--tui-tab-active-indicator-color

全局修改所有样式 #

把以下代码写到项目全局样式文件（通常是styles.scss）即可：

tui-tabs {
  // 自定义整个tabs栏背景色
  --tui-tabs-background: #f5f5f5;
  // 自定义激活态标签背景色
  --tui-tab-active-background: #ffffff;
  // 自定义激活态标签文字颜色
  --tui-tab-active-text-color: #1976d2;
  // 自定义激活态底部指示器颜色
  --tui-tab-active-indicator-color: #1976d2;
}

仅修改单个组件内的样式 #

在使用的组件样式文件中添加以下代码，用自定义类名限制范围避免影响全局：

::ng-deep .custom-tabs {
  --tui-tabs-background: #2d2d2d;
  --tui-tab-active-background: #424242;
  --tui-tab-active-text-color: #90caf9;
  --tui-tab-active-indicator-color: #90caf9;
}

对应的组件模板中给绑定自定义类：

<tui-tabs class="custom-tabs">
  <tui-tab-item [active]="true">首页</tui-tab-item>
  <tui-tab-item>设置</tui-tab-item>
  <tui-tab-item>帮助</tui-tab-item>
</tui-tabs>

方式2：自定义Appearance（适合多场景复用自定义主题） #

如果需要在项目多个位置复用同一套自定义tabs主题，可以自定义Appearance属性：

1. 在全局样式文件中定义自定义主题：

tui-tabs[appearance="custom-dark"] {
  --tui-tabs-background: #1a1a1a;
  --tui-tab-active-background: #333333;
  --tui-tab-active-text-color: #ffa726;
  --tui-tab-active-indicator-color: #ffa726;
}

2. 任意位置使用时直接指定appearance属性即可：

<tui-tabs appearance="custom-dark">
  <tui-tab-item [active]="true">标签1</tui-tab-item>
  <tui-tab-item>标签2</tui-tab-item>
</tui-tabs>

注意：如果样式不生效，先排查是否有更高优先级的样式覆盖了你定义的变量，可临时加!important验证是否是样式优先级问题。

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