如何修改v-data-table中下拉选择菜单的颜色与高亮样式？

方法1：针对性覆盖组件样式（推荐，不影响其他全局样式） #

如果你只需要修改v-data-table内的这类控件颜色，直接覆盖对应类的样式即可：

• 如果你在全局样式文件（无scoped属性）中修改，直接写入以下代码：

/* 修改选中项文本颜色 */
.v-data-table .primary--text {
  color: #替换为你需要的色值 !important;
}
/* 修改下拉菜单选中项的高亮背景色（可选） */
.v-data-table .v-list-item--active {
  background-color: #替换为你需要的背景色 !important;
}

• 如果你是在单个Vue组件的带scoped属性的style块中修改，需要加深度选择器：

:deep(.v-data-table .primary--text) {
  color: #替换为你需要的色值 !important;
}
:deep(.v-data-table .v-list-item--active) {
  background-color: #替换为你需要的背景色 !important;
}

方法2：全局修改primary主题色 #

如果你需要统一修改所有Vuetify组件使用的primary色，直接调整Vuetify的主题配置即可：

// vuetify配置文件（通常为vuetify.js或plugins/vuetify.js）
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#替换为你需要的色值',
        }
      }
    }
  }
})

方法3：单独限定当前v-data-table生效 #

如果你只需要修改某一个v-data-table的控件颜色，给组件加自定义类后再写样式即可：

<template>
  <!-- 给目标v-data-table添加自定义类 -->
  <v-data-table
    class="custom-table"
    :items="items"
    :headers="headers"
    <!-- 其他原有属性 -->
  />
</template>

<style scoped>
/* 仅对带custom-table类的v-data-table生效 */
:deep(.custom-table .primary--text) {
  color: #替换为你需要的色值 !important;
}
</style>

注：如果样式未生效，可打开浏览器开发者工具选中对应元素，查看生效样式的优先级，调整选择器权重即可

内容的提问来源于stack exchange，提问作者Ram pravin