vue.js - 增加 v-data-table Vuetify 中标题的字体大小

Question

我正在尝试增加标题的字体大小，以使其与使用 v-data-table 绘制的表中的行更具特色。我参考了类似问题问题 1和问题 2中的解决方案，但解决方案似乎不起作用。随附的代码还负责使用 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 .v-data-table-header tr th {
  font-size: 24px !important;
}

演示

Answer 2

v-data-table应用专门针对标头类的样式：

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