Vue+Vuetify中v-tabs自定义active类激活时文字颜色不生效如何解决

问题原因 #

你遇到的是CSS优先级冲突问题：Vuetify内置的.v-tab激活状态的文字颜色规则优先级高于你自定义的.active类，而背景色Vuetify默认未给激活状态做特殊设置，所以自定义背景色可以生效，文字颜色被默认规则覆盖了。

解决方法 #

以下任选一种即可：

方法1：用深度选择器提高自定义类优先级（推荐，无需修改模板）

如果你的样式写在带scoped属性的<style>标签内，需要用Vue的深度选择器命中组件内部样式：

• Vue2 写法：

/deep/ .active {
  color: #222222;
  background-color: #fff;
}

• Vue3 写法：

:deep(.active) {
  color: #222222;
  background-color: #fff;
}

如果调整后仍不生效，可以给color属性加!important强制覆盖。

方法2：直接覆盖Vuetify原生激活类

你也可以不用自定义active-class，直接覆盖Vuetify内置的激活标签类.v-tab--active，同时可以删除v-tabs标签上的active-class="active"属性：

/* Vue3 scoped 样式示例 */
:deep(.v-tab--active) {
  color: #222222;
  background-color: #fff;
}

方法3：全局样式覆盖

如果不想用深度选择器，可以把样式写在全局无scoped的样式文件中，建议给v-tabs加个自定义类限定范围避免样式冲突：
模板修改：

<v-tabs
  class="custom-tabs"
  background-color="#FFFFEA"
  slider-color="#C89933"
  optional
  right
>
<!-- 其余v-tab代码不变 -->

全局样式：

.custom-tabs .v-tab--active {
  color: #222222;
  background-color: #fff;
}

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