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

Question

this is the first time i post here. I have tried to do this for 2 days but it has been very difficult for me. I am using Vuetify and v-tabs component to show some stuff like this:

EXAMPLE

As you can see the background's card is black and i want to change it to transparent so the background html which is a linear gradient between blue/purple/black shows...

I have tried adding background-color: transparent to v-tab-item just like i did above in the v-tab "Material Clase/Material Complementario" but i don't know why it isn't applied to the v-tab-item below

This is my code:

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

As you can see i give to v-tabs the background-color to transparent and it works because it shows the background from the root (linear gradient colors) but if i give a background-color transparent to v-tab-item it doesn't work because i keep seeing the BLACK background like the screenshot i uploaded...

Thanks in advance !!

Answer 1

in vuetify you can't change the v-tab-item background-color because its possible to change it in v-tab-items element. This is what I did:

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

I assigned and id value "custom-tab-items" to the element. Then, I customize the background color with css:

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

Answer 2

use this style for dark and light theme to change all style of v-tabs:

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