更改Vuetify表头的样式

Question

我正在尝试更改 vuetify 表头的默认颜色。我设法使用下面的代码使用自定义类更改标头：

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

不幸的是，全选的复选框样式仍然是默认颜色。由于复选框的标题未在数组标题上声明，因此未使用自定义类进行声明。

以前我尝试使用以下代码在标签上覆盖它：

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

但它不起作用。

如何声明复选框的类？或者有什么可能的方法让我覆盖默认样式？

Answer 1

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

我检查了表头类名称，并在样式标记内使用此代码来更改该类的样式：

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

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