更改 Vuetify 的样式 table header

Question

我正在尝试更改 vuetify 的默认颜色 table header。我设法使用以下代码使用自定义 class 更改 header：

headers = [
    {
        text: "Metering Point",
        align: "start",
        sortable: true,
        value: "meteringpoint",
        class: "success--text title"
    },
]

不幸的是，select 的复选框样式仍然是默认颜色。由于复选框的 header 未在数组 headers 上声明，因此未使用自定义 class.

声明

之前我尝试用下面的代码在标签上覆盖它：

.v-data-table-header {
    background-color: grey;
}

但是没用。

如何为复选框声明 class？或者有什么方法可以覆盖默认样式吗？

Answer 1

正如@StevenSiebert 所说。我需要在渲染后检查 class 是什么。

我检查了 table header class 名称并在样式标签内使用此代码更改 class:

的样式

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}

这是我在 Vue 中为 Scoped CSS 找到的参考：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Answer 2

在此处查看官方 Vuetify 文档时：Vuetify API

它提供了在 v-data-table（对于所有复选框）或 v- 上设置 checkbox-color 的选项data-table-header（用于 select all 复选框）考虑到官方支持，这是我的选择。

<v-data-table
  :items="desserts"
  headers = [
    {
      text: "Metering Point",
      lign: "start",
      sortable: true,
      value: "meteringpoint",
      class: "success--text title"
    },
  ]
  checkbox-color="#DCDCDC"
></v-data-table>

更改 Vuetify 的样式 table header

change the style of Vuetify table header

css

sass

vue.js

vuetify.js