Vuetify 3 DataTables样式问题求助：图标复选框透明及表头改色

1. 修复表头标题颜色及背景色 #

你的现有样式无法生效，核心原因是Vuetify的v-data-table表头自带样式层级，普通类选择器权重不足。可通过以下两种方式解决：

方式一：全局样式（无scoped） #

如果<style>标签未加scoped属性，直接提升选择器权重：

.blue-header .v-data-table-header th {
  background-color: blue;
  color: white; /* 同步设置文字颜色，避免与蓝色背景冲突 */
}

方式二：Scoped样式（Vue单文件组件） #

若使用scoped样式，需用::v-deep穿透组件内部样式：

<style scoped>
::v-deep .blue-header .v-data-table-header th {
  background-color: blue;
  color: white;
}
</style>

2. 修复图标与复选框透明问题 #

图标和复选框呈透明状态，通常是默认颜色与背景色对比度极低，或被组件默认样式覆盖，直接指定对应元素颜色即可：

复选框颜色调整 #

/* 表头复选框 */
.blue-header .v-data-table-header .v-checkbox .v-icon {
  color: white; /* 与表头背景色匹配，可按需修改 */
}
/* 表格行内复选框 */
.blue-header .v-data-table-body .v-checkbox .v-icon {
  color: #333; /* 设置合适的深色，保证可见性 */
}

排序/分页图标颜色调整 #

/* 表头排序、下拉图标 */
.blue-header .v-data-table-header .v-icon {
  color: white;
}
/* 分页区域图标 */
.blue-header .v-data-footer .v-icon {
  color: blue;
}

完整示例代码 #

<template>
  <v-data-table
    v-model:items-per-page="itemsPerPage"
    :headers="donner.headers"
    :items="donner.content"
    item-key="name"
    class="blue-header"
    show-select
  >
  </v-data-table>
</template>

<style scoped>
::v-deep .blue-header .v-data-table-header th {
  background-color: blue;
  color: white;
}

::v-deep .blue-header .v-data-table-header .v-checkbox .v-icon {
  color: white;
}

::v-deep .blue-header .v-data-table-body .v-checkbox .v-icon {
  color: #333;
}

::v-deep .blue-header .v-data-table-header .v-icon {
  color: white;
}
</style>

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