Vuetify Table - change text color of table header-CodePudding

I have a vuetify table with class condition-table, I applied this CSS

.condition-table {
    background-color: #e1f5fe70;
}

It works, but when I did this

.condition-table > thead > tr {
    color: black;
    background-color: white;
}

It doesn't work at all. I just want to make my table header a bit stand out than then the row items .

Please let me know if you notice I missed anything

CodePudding user response：

As you are trying to override the inbuilt styles of the <v-data-table> header. You can use deep selector.

::v-deep .v-data-table-header {
  color: black;
  background-color: white;
}

CodePudding user response：

v-data-table have a header slot. You can use it to modify header style.

 <template>
       <div id="app">
        <v-app id="inspire">
        <v-data-table
          :headers="headers"
          :items="desserts"
          hide-default-header
          
        >
          <template v-slot:header="{ props }">
            <th v-for="head in props.headers"  >{{ head.text.toUpperCase() }}
          </template>
        </v-data-table>
      </v-app>
    </div>
</template>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        }
      ],
    }
  },
})

And here is text color style

 .header-text-color{
      color: red;
  }