如何修改Vuetify中选中v-tab的背景色且不改变文字颜色？

你已经在v-tab上配置了exact-active-class="active"，可以直接通过这个自定义类来修改选中标签的背景色，同时保留原有文字颜色：

1. 保留原有Vuetify代码不变：

<v-tabs color="#949494" hide-slider class="ml-5 mt-4">
  <v-tab 
    v-for="aba in abas" 
    :key="aba.ordem" 
    class="mr-1" 
    exact 
    exact-active-class="active" 
    :to="construirRota(aba)"
  >
    {{ aba.titulo }}
  </v-tab>
</v-tabs>

2. 在组件的<style>标签中添加CSS样式：

.active {
  background-color: #你的目标背景色; /* 示例：#f5f5f5 */
  color: inherit; /* 继承未选中状态的文字颜色，确保不改变 */
}

如果遇到Vuetify默认样式优先级更高导致样式不生效的情况，可添加!important强制覆盖：

.active {
  background-color: #你的目标背景色 !important;
  color: inherit !important;
}

替代方案（无需自定义类） #

如果不想额外定义active类，也可以直接针对Vuetify内置的激活类.v-tab--active修改：

.v-tab--active {
  background-color: #你的目标背景色;
  color: inherit;
}

这样就能实现仅修改选中标签的背景色，同时保持文字颜色与未选中状态一致的效果。

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