Vue 选项卡更改活动文本颜色 class

Question

我想更改活动标签的文本颜色。

使用 Vue.js + Vuetify

我创建了一个 .active CSS class。有趣的是 background-color 属性对于活动 classes 有效，但文本颜色（颜色）在活动时不会改变。

我应该如何更改代码，以便两个属性都适用于活动 class？

风格

  .active {

  color: #222222;
  background-color: #ffff;
  }

模板

      <v-tabs
        background-color="#FFFFEA"
        slider-color="#C89933"
        optional
        right
        active-class="active"

        >

        <v-tab
          class="normalize font-weight-bold "
          to="/tab1"
          >
          Tab 1
        </v-tab>          

        <v-tab    
          class="normalize font-weight-bold"
          to="/tab2"
          >
          Tab 2
        </v-tab>   

        <v-tab
          class="normalize font-weight-bold"
          to="/tab3"
          >
          Tab 3
        </v-tab>
  
          
      </v-tabs>

Answer 1

如果您的所有选项卡都路由到 url link，您可以在其中检查当前的 $route.name 并确认它是当前活动的。使用三元表达式选择 class 进行渲染。执行如下操作。

 <a
          @click="this.$router.push('http://localhost:8081/')"
          href="#"
          class="
            hover:bg-papaDark-700
            text-white
            hover:text-gray-200
           
          "
          :class="$route.name === 'Home' ? 'border-l-6 border-gray-200 ' : ''"
        >

其中 'Home' 是 'locahost:8081/' 的路由组件名称。例如。

告诉我它是否有效

Answer 2

默认颜色来自 Vuetify 组件本身。要覆盖颜色，您可以在颜色值后使用 !important 标志。

    .active {
       color: #222222 !important;
       background-color: #ffff !important;
    }

Vue 选项卡更改活动文本颜色 class

Vue tab change text color for active class

vue.js

vuetify.js