如何更改 v-tab-item 背景颜色？ 验证

Question

这是我第一次在这里发帖。 我已经尝试这样做了 2 天，但这对我来说非常困难。 我正在使用Vuetify和v-tabs组件来显示如下内容：

例子

如您所见，背景卡是黑色的，我想将其更改为透明，因此背景 html 是蓝色/紫色/黑色之间的线性渐变显示...

我试过添加 background-color: transparent到v-tab-item就像我在上面的 v-tab“Material Clase/Material Complementario”中所做的那样，但我不知道为什么它没有应用于v-tab-下面的项目

这是我的代码：

<template>
<v-app style="background-color: rgba(30, 30, 30, 0.3);">
  <v-tabs fixed-tabs background-color="transparent" color="green" slider-color="purple">
    <v-tab>Material Clases</v-tab>
      <v-tab-item >
        <div class="mb-5 p-3">
          <h3 class="mb-3">Guias de clases</h3>
          <div class="row">
            <div
              v-for="(item, i) in items"
              :key="i"
              class="col-sm-12 col-md-6 col-lg-4"
            >
              <v-card
                class="mx-auto background-tr borde-claro"
                max-width="1000"
                elevation="15"
                outlined
              >
                <v-list-item three-line >
                  <v-list-item-content>
                    <div class="text-overline mb-4 tx-white">
                      {{ item.title }}
                    </div>
                    <v-list-item-title class="text-h5 mb-1 tx-white">
                      Clase: {{ item.clase }}
                    </v-list-item-title>
                    <v-list-item-subtitle class="tx-white">
                      Descripcion: {{ item.descripcion }}
                    </v-list-item-subtitle>
                  </v-list-item-content>

                  <v-list-item-avatar
                    tile
                    size="50"
                    color="grey"
                  ></v-list-item-avatar>
                </v-list-item>

                <v-card-actions>
                  <v-btn class="tx-white borde-claro centrar" outlined rounded text >
                    Descargar
                  </v-btn>
                </v-card-actions>
              </v-card>
            </div>
          </div>
        </div>
      </v-tab-item>
</v-app>
</template>
      

如您所见，我将v-tabs的背景颜色设置为透明，它之所以有效，是因为它显示了根部的背景（线性渐变颜色），但是如果我将背景颜色设置为v-tab-item透明，则它不会无法正常工作，因为我一直看到黑色背景，就像我上传的屏幕截图一样……

提前致谢 ！！

Answer 1

在 vuetify 中，您无法更改 v-tab-item 背景颜色，因为可以在 v-tab-items 元素中更改它。 这就是我所做的：

    <v-tabs v-model="userProfileTabs" :show-arrows="false" color="#E30E4F" background-color="transparent" dark>
        <v-tab to="#tabs-1"><b>TAB 1</b></v-tab>
        <v-tab to="#tabs-2"><b>TAB 2</b></v-tab>
    </v-tabs>
    <v-tabs-items v-model="userProfileTabs" id="custom-tab-items">
        <v-tab-item value="tabs-1">
        </v-tab-item>
        <v-tab-item value="tabs-2">
        </v-tab-item>
    </v-tabs-items>

我为元素分配了 id 值“custom-tab-items”。 然后，我用 css 自定义背景颜色：

<style>
#custom-tab-items {
    background-color: transparent !important;
}
</style>

Answer 2

将此样式用于深色和浅色主题以更改所有 v-tabs 样式：

.theme--dark.v-tabs-items {
  background-color: transparent !important;
}
.theme--light.v-tabs-items {
  background-color: transparent !important;
}