vue.js - Vuetify v-data-table custom header class styling not being applied

Question

I'm trying to customize the class belonging to the headers of a v-data-table in Vuetify but the class styling is not being applied. My component looks like this:

<template>
    <v-data-table :headers="headers" :items="myitems"></v-data-table>
    <template v-slot:item.thing="{ item }">
        <span class="some-other-style">{{ item.thing }}</span>
    </template>
</template>

<script>
export default {
  name: 'MyComponent',

  data: () => ({
    headers: [
      { text: 'First Header', value: 'first', class: 'my-header-style' },
      { text: 'Second Header', value: 'thing', class: 'my-header-style' },
      ...
</script>

<style scoped>
.some-other-style {
  background: blue;
}
.my-header-style {
  color: #6f8fb9;
}
</style>

I'm reluctant to say that this is an issue with Vuetify (or my Vuetify code) because it is actually setting the class against the correct DOM element. Firefox/Chrome dev tools show the class name on the element e.g. <th class="text-start my-header-style sortable"..., but the CSS styling for the class is not being applied. Firefox/Chrome dev tools also don't show any class called my-header-style under the styles (Chrome) or Filter Styles (Firefox) sections for that element, but when I search dev tools for my class name it does show up:

.my-header-style[data-v-2c00ba1e] {
  color: #6f8fb9;
} 

I've also tried removing scoped from the <script> element but the result is the same. I'm testing on Chrome 87.0.4280.88 and Firefox 84.0.2 on Ubuntu 18. I'm using vue-cli with webpack, and I've tried restarting the development server, refreshing the page etc. in case it was a hot reload issue.

Answer 1

You can hide default header and create custom using v-slot:

<template>
    <v-data-table
    :headers="headers"
    :items="myitems"
    hide-default-header
    >

    <template v-slot:header="{ props: { headers } }">
        <thead>
          <tr>
            <th v-for="h in headers" :class="h.class">
              <span>{{h.text}}</span>
            </th>
          </tr>
        </thead>
    </template>
    </v-data-table>
</template>

<script>
export default {
  name: 'MyComponent',

   data () {
        return {
            headers:[
                { text: 'First Header', value: 'first', class: 'my-header-style' },
                { text: 'Second Header', value: 'thing', class: 'my-header-style' },
            ],
            myitems : []
        }
    }
}
</script>

<style scoped>
.some-other-style {
  background: blue;
}
.my-header-style {
  color: #6f8fb9 !important;
}
</style>