Vue选项卡更改活动类的文本颜色答案

【问题标题】：Vue tab change text color for active classVue选项卡更改活动类的文本颜色
【发布时间】：2021-07-22 11:05:27
【问题描述】：

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

使用 Vue.js + Vuetify

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

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

风格

  .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>

【问题讨论】：

你试过在样式标签上添加作用域属性吗？
作用域标签使background-color 和color 都处于非活动状态。
你试过在 css 属性中添加 '!important' 标志吗？
@santanubera 这解决了问题。请添加您的评论作为回复，以便我将其标记为正确的解决方案。谢谢！

标签： vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

 <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/' 的路由组件名称。例如。

告诉我它是否有效

【讨论】：

我忘了说我正在使用 vue-router（带历史模式）。我真的不明白如何实施您的解决方案。我应该将三元表达式实现到 v-tab 吗？
是的。每个 v-tab 中的 css 类的三元表达式。如果 $route.name 返回 true，则将呈现具有任何属性的类。我认为您正在使用顺风。如果是，请使用我的相同代码对任何路由组件进行测试。如果不是，只需放置您的类名而不是 tailwind 的属性，然后在活动选项卡上做一个小测试。
如果对您有用，请标记为已接受