如何使用 CSS 作为 Vuetify v-tab 的道具？答案

【问题标题】：How do I use CSS as a prop for a Vuetify v-tab?如何使用 CSS 作为 Vuetify v-tab 的道具？
【发布时间】：2020-04-30 16:44:15
【问题描述】：

我正在尝试更改我的网站以使调色板交换更容易，因为我们仍在努力寻找仍然有效的颜色。我们使用 Vue 和 Vuetify 与 SCSS 生成我们的主 CSS 文件。我们几乎只使用 Vue SFC。我目前被 V-Tab 问题难住了，即下方的“活动”栏不会改变颜色。

主要问题是，在使用 Vuetify 组件时，文件内 CSS 几乎没有影响。当我将color="#ffffff" 作为道具传递时，它的效果非常好，一切都很棒。但是，我根本无法使用 CSS 以相同的方式更改颜色（生成的代码实际上在标签元素的不同 div outside 中有条）。

我尝试了所有我能想到的方法来覆盖 v-tabs-slider-wrapper 元素样式，但无济于事
我已尝试在 SFC 的 computed 部分中使用 SCSS 函数
我已经尝试过基本的 CSS 和 SCSS
我已尝试将v-bindcolor 属性添加到引用 SCSS 函数的计算函数中
我尝试过使用类、ID、名称等。
我在所有迭代中也尝试了background-color，希望

如果有人可以帮助我，我将不胜感激。

<template>
  <v-tabs class="tabs">
    <v-tab>Thing</v-tab>
    <v-tab-item>Inner Thing</v-tab-item>
  </v-tabs>
</template>

<script>
export default { };
</script>

<style lang="scss" scoped>
@import "../styles/main.scss";

.tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
  color: getColor_fromText("color"); //defined in main.scss
}
</style>

【问题讨论】：

标签： css vue.js sass vuetify.js

【解决方案1】：

你试过滑块的颜色属性吗？

  <v-tabs-slider color="yellow"></v-tabs-slider>

这里的例子： https://vuetifyjs.com/en/components/tabs/#custom-icons

如果您想更改特定选项卡的背景颜色，可以尝试以下操作：

  <v-tabs
    :background-color="activeTab === highlightTab ? 'deep-purple accent-4' : ''"
    v-model="activeTab"
  >

查看完整示例（单击第二个选项卡）： https://codepen.io/DomHaas/pen/qBZrZVy

【讨论】：