在 v-data-table Vuetify 中增加 header 的字体大小

Question

我正在尝试增加 header 的字体大小，使其与使用 v-data-table 绘制的 table 中的行相比更具特色。我参考了类似问题 and Question 2 中的解决方案，但解决方案似乎没有用。附件也是负责 header 文本大小的代码，它是使用 Google 开发人员工具（检查元素）编辑的。关于在哪里或如何编辑这部分代码的任何建议

代码：

<v-data-table
              :headers="tableFields"
              :items="programs"
              :items-per-page="5"
              class="elevation-1">
                    <template v-slot:[`item._id.$oid`]="{ item }">
                      {{item._id.$oid}}
                    </template>
</v-data-table>

脚本代码：

 data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},
          {text:'Tag',value:'tags'},
          {text:'Score (Product)',value:"scores.product",},
          {text:'Last Modified Date',value:'DateModified'},  
          {text: 'Actions', value: 'action', sortable: false, align: 'center'},
        ],

Answer 1

应用专门针对 v-data-table header class:

的样式

thead.v-data-table-header th[role=columnheader] {
  font-size: 14px !important;
}

Answer 2

使用此样式增加页眉字体大小：

.v-data-table .v-data-table-header tr th {
  font-size: 24px !important;
}

demo

在 v-data-table Vuetify 中增加 header 的字体大小

Increase font size of header in v-data-table Vuetify

vue.js

vuejs2

vuetify.js

v-data-table