change the style of Vuetify table header-CodePudding

I am trying to change the default color of vuetify table header. I managed to change the header using custom class using code below:

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

Unfortunately, the checkbox style for select all is still on default color. As the header for the check box is not declared on the array headers so it is not declared with the custom class.

Previously I tried to overwrite it on the tag with this code below:

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

but it doesn't work.

how do I declare the class for the checkbox? Or is there any possible way for me to overwrite the default styling?

CodePudding user response：

when taking a look at the official Vuetify Docs here: Vuetify API

It gives the option to set checkbox-color on the v-data-table (for all checkboxes) or v-data-table-header (for the select all checkbox) which would be my choice considering it is officially supported.

<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>

CodePudding user response：

As said by @StevenSiebert. I need to check what is the class after being rendered.

I checked the table header class name and use this code inside the style tag to change the style for that class:

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

Here is the reference I found for Scoped CSS in Vue: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors