如何修改v-data-table组件行的hover背景色？

我有一个包含5列的v-data-table组件，当前表格使用深色模式（整体深灰色），鼠标悬停表格行时背景色为浅灰色，希望将该hover背景色修改为橙色，请问该如何实现？

<v-data-table
  :loading="enableLoadingCircle"
  :footer-props="{ 'items-per-page-options': [50, 100, 250, -1] }"
  dense
  dark
  :fixed-header="fixedHeader"
  calculate-widths
  :height="windowSize.y - 63 - 60"
  :headers="headers"
  :items="res"
  class="elevation-0"
  sort-by="publicationDate"
  :sortDesc= "sortVal"
  :no-data-text="loadingMessage"
  :loading-text="loadingMessage"
>
  <v-progress-linear slot="progress"
    v-if="enableLoadingCircle == true"
    height="3"
    indeterminate
    :color=yellow
  ></v-progress-linear>

  <!-- VIDEO column -->
  <template #item.video="{ item }">
    <a
      target="_blank"
      v-if="item.video != ''"
      :href="item.video"
    >
      <v-btn dark icon>
        <v-icon>
          mdi-movie
        </v-icon>
      </v-btn>
    </a>
  </template>
  <!-- TITLE column -->
  <template #item.title2="{ item }">
    <a
      target="_blank"
      v-if="item.file != ''"
      :href="item.file"
    >
      <span>
        {{ item.title }}
      </span>
    </a>
  </template>
</v-data-table>

解决方案 #

因为表格启用了dark属性，需要针对深色模式下的行悬停样式做覆盖，通过自定义CSS即可实现：

1. 组件内作用域样式（Vue单文件组件）

如果在组件的<style scoped>标签中编写，需要用深度选择器穿透Vuetify的组件样式：

::v-deep .v-data-table.dark .v-data-table__tbody tr:hover {
  background-color: #ff9800 !important; /* 可替换为你需要的橙色色值 */
}

2. 全局样式

如果在全局样式文件（如app.css）中添加，无需深度选择器：

.v-data-table.dark .v-data-table__tbody tr:hover {
  background-color: #ff9800 !important;
}

说明：

• .dark类对应表格上的dark属性，确保只修改深色模式下的样式
• .v-data-table__tbody tr:hover是Vuetify表格行悬停的默认选择器
• !important用于覆盖Vuetify原有样式的优先级，你可以根据需求调整橙色具体色值

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