How to change styles for vuetify tag?

Question

css

Hello, dear forum users. I want to change styles for the vuetify v-data-table tag. How do I refer to :headers="dataSecretsTableHeaders" if I want to style only dataSecretsTableHeaders in CSS?

<div class="table">
      <v-data-table
        :headers="dataSecretsTableHeaders"
        :items="dataSecrets"
        :items-per-page="7"
        class="table"
      >
        <template v-slot:item.action="{ item }">
          <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
          >
            edit
          </v-icon>
          <v-icon
            small
            @click="deleteItem(item)"
          >
            delete
          </v-icon>
        </template>
        <template v-slot:item.button="{ item }">
          <button
            class='button-secondary'
            @click="goTo(`/data-secrets/analytics/${item.id}`,item)"
          >
            View Analytics
          </button>
        </template>
      </v-data-table>
    </div>

PS No need to write that styles are set for the tag and not for the attribute. Read the question carefully =)

Answer 1

If I understand correctly, use the headers slot, similar to the item you already used. There you can set any markup with any styles \ classes \ attributes.