如何修改Vuetify v-slider组件thumb-label的文本颜色？

要修改v-slider组件thumb-label的颜色，需要利用深度选择器穿透Vuetify组件的封装样式，具体操作如下：

1. 基础代码示例 #

先在模板中定义带thumb-label的v-slider：

<template>
  <v-slider
    v-model="sliderValue"
    thumb-label
    label="示例滑块"
  ></v-slider>
</template>

<script setup>
import { ref } from 'vue'
const sliderValue = ref(30)
</script>

2. 添加自定义样式 #

根据你使用的Vue和Vuetify版本，选择对应的深度选择器：

Vue3 + Vuetify 3 #

在scoped样式中使用:deep()选择器：

<style scoped>
/* 修改thumb-label的背景色和文字色 */
:deep(.v-slider-thumb-label) {
  background-color: #2ecc71; /* 自定义背景色 */
  color: #ffffff; /* 自定义文字颜色 */
}

/* 可选：修改滑块激活状态下的thumb-label样式 */
:deep(.v-slider-thumb-label--active) {
  background-color: #27ae60;
}
</style>

Vue2 + Vuetify 2 #

在scoped样式中使用/deep/选择器：

<style scoped>
/deep/ .v-slider-thumb-label {
  background-color: #2ecc71;
  color: #ffffff;
}

/deep/ .v-slider-thumb-label--active {
  background-color: #27ae60;
}
</style>

注意事项 #

• 可以通过浏览器开发者工具，查看thumb-label元素的具体类名，确保选择器匹配（不同Vuetify小版本可能类名略有差异）
• 如果不需要样式作用域，可以去掉<style>的scoped属性，直接写选择器，但会影响全局所有v-slider的thumb-label样式

内容的提问来源于stack exchange，提问作者J.Somers