如何修改VUETIFY框架中v-tab-item组件的背景色为透明

问题原因 #

你给v-tab-item设置透明不生效，是因为v-tabs的内容区域外层默认有.v-tabs-content和.v-window-item两层带默认背景色的容器，你直接给v-tab-item加样式要么没有选中正确元素，要么优先级被Vuetify自带样式覆盖，所以不生效。

解决步骤 #

1. 给v-tabs组件添加content-class属性，自定义内容区的类名：

<v-tabs 
  fixed-tabs 
  background-color="transparent" 
  color="green" 
  slider-color="purple"
  content-class="transparent-tab-content"
>

2. 添加对应样式，如果你用了scoped样式，需要用深度选择器穿透组件样式隔离：

• Vue2 + scoped样式：

<style scoped>
::v-deep .transparent-tab-content,
::v-deep .transparent-tab-content .v-window-item {
  background-color: transparent !important;
}
</style>

• Vue3 + scoped样式：

<style scoped>
:deep(.transparent-tab-content),
:deep(.transparent-tab-content .v-window-item) {
  background-color: transparent !important;
}
</style>

3. 确认你自定义的background-tr类已经正确设置v-card的透明属性：

.background-tr {
  background-color: transparent !important;
}

修改完成后，从tabs内容区到内部卡片都会变为透明，即可透出底层的渐变背景。

内容的提问来源于stack exchange，提问作者Anthony Jacobs