Vuetify修改Data-table每页选择器及分页箭头字体颜色等问题

针对你提到的三个样式问题，直接通过自定义CSS覆盖Vuetify默认样式即可解决，以下是具体实现代码：

1. 修改每页条目选择器字体与分页箭头颜色为白色 #

/* 每页条目选择器的输入文本颜色 */
.v-select__slot input {
  color: white !important;
}
/* 分页切换箭头颜色 */
.v-pagination__navigation .v-icon {
  color: white !important;
}

2. 设置每页条目选择器黑底白字，选中项自定义颜色 #

/* 选择器主体黑底白字 */
.v-select.v-input--is-active:not(.v-input--is-disabled) .v-select__slot,
.v-select .v-select__slot {
  background-color: #000 !important;
  color: white !important;
}
/* 下拉选项默认样式 */
.v-menu__content .v-list-item {
  background-color: #000 !important;
  color: white !important;
}
/* 选中的下拉选项样式（这里设为蓝色，可自行修改） */
.v-menu__content .v-list-item--active {
  background-color: #1976d2 !important;
  color: white !important;
}

3. 让Data-Table背景与页面背景一致 #

如果你的页面背景是纯色，直接将data-table的背景设为透明或对应颜色即可：

.v-data-table {
  background-color: transparent !important;
  /* 若页面背景是特定颜色，比如#f5f5f5，就改成：
  background-color: #f5f5f5 !important;
  */
}
/* 同时去掉表格内卡片的背景色（如果需要） */
.v-data-table__wrapper .v-card {
  background-color: inherit !important;
}

注意事项 #

• 如果你的组件用了scoped样式，需要在选择器前加上::v-deep（Vue 2）或:deep()（Vue 3）来穿透作用域，比如：

::v-deep .v-select__slot input {
  color: white !important;
}

• 颜色值可根据你的实际需求替换，比如黑底用#212121代替纯黑会更柔和。

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