Adding CSS to Vuetify v-data-table

Question

I want to add/modify CSS to my v-data-table header and cell rows and I searched official documentation and searched on google but none of the solutions worked. As per the different solutions I tried to add CSS Classes and templates for the headers but none of them seems to be working for me. I am working on the Vue for the first time :)

here is my code:

<v-data-table
  :headers="headers"
  :search="search"
  :items="PendingApprovals"
      multi-sort
      v-model="selected"
    show-select
    item-key="id"    
    show-expand
    hide-default-footer="true"
    disable-pagination = "true"
    class="elevation-1 mytable">

    <template v-slot:[`item.DateSubmitted`]="{ item }">
      {{FormatDate(item.raw.DateSubmitted)}}
    </template>
    <template v-slot:[`item.Download`]="{ item }">    
      <a :href="DownloadUrl +item.raw.id">
      <v-icon size="small" class="me-2">
        mdi-download
      </v-icon>
    </a>
    </template>
    <template v-slot:[`item.Edit`]="{ item }">               
        <a :href="/form/+item.raw.id">
        <v-icon size="small" class="me-2">
        mdi-pencil
      </v-icon>
      </a>
  
    </template>

  </v-data-table>


export default {
    components: {
      VDataTable, 
  },
    data () {
      return {
        dialog: false,
      DownloadUrl : process.env.VUE_APP_API_BASE_URL + "JournalEx/Example/",      
      PendingApprovals:[],
      selected: [],
      ApproveDenyValues: [],
      search:'',

      rules: {
      required: (value) => !!value || "Denial Reason is a required field"
      },

      snackbar: false,
      snackbartext: '',
      timeout: 3000,

      headers: [
        {
          key: 'JournalTest',
          title: 'ID',
          align: 'start',
        },
        { title: 'IPS CASE', key: 'CaseCode', width: '20%' },
        { title: 'REQUEST REASON', key: 'Reason',  width: '30%'},
        { title: 'REQUESTED BY', key: 'RequestedBy' ,  width: '15%'},
        { title: 'DATE SUBMITTED', key: 'DateSubmitted'},
        { title: 'DOWNLOAD', key: 'Download',sortable:false},
        { title: 'EDIT', key: 'Edit', sortable: false },

      ], 
      }
    }
}

Here are some of the CSS I tried but did not work for me. not sure why:

<style scoped>
.v-data-table >>> .v-data-table-header {
  background-color: red !important;
}

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}
</style>

Answer 1

I have resolved the issue with following CSS code :

.v-data-table .v-table__wrapper > table > thead > tr > td,
    .v-data-table .v-table__wrapper > table > thead > tr th,
    .v-data-table .v-table__wrapper > table tbody > tr > td,
    .v-data-table .v-table__wrapper > table tbody > tr th {
      background-color: #f9f5e3 !important;
    }
    
    
    .v-data-table .v-table__wrapper > table > thead > tr > th,
    .v-data-table .v-table__wrapper > table tbody > tr > th {
      background-color: #D14081 !important;
    }
    
    
    .v-data-table-header__content {
      background-color: #D14081 !important;
      color: #CCF5AC;
      font-weight: bold;
    }


    .v-data-table .v-table__wrapper > table tbody > tr:nth-of-type(even) > td,
    .v-data-table .v-table__wrapper > table tbody > tr:nth-of-type(even) th {
      background-color: #e4e0d0 !important;
    }