Style changes in Vuetify 3 DataTables

Question

I have a question about the Vuetify3 DataTables:

The icons and checkboxes are transparent, I can't change the property of this and i wish to change the headers of title with other color.

Someone can help me to resolve this?

Here is my code:

         <v-data-table
           v-model:items-per-page="itemsPerPage"
              :headers="donner.headers"
              :items="donner.content"
              item-key="name"
              class="blue-header"
              show-select
           >
         </v-data-table> 

         <style>
          .blue-header th {
           background-color: blue;
           };
         </style>

Answer 1

The initial header background color is set by this declaration:

.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: rgb(var(--v-theme-surface));
}

These selectors give a high specificity, that you need to match in your declaration.

Your blue-header class lands on the element with the v-data-table class, so this should do it:

.v-data-table.blue-header .v-table__wrapper > table > thead > tr th,
.v-data-table.blue-header .v-table__wrapper > table tbody > tr th {
  background-color: blue;
}

Alternatively, you can pull out the crowbar and do background-color: blue !important;, but it is not really necessary in this case.