如何增加 v-data-table 标题中的字体大小

Question

我想将<th>Vuetify table 中的字体大小增加到 20px v-data-table。但它保持在 12px。

我试过这个：

table.v-table thead tr th {
  font-size: 20px!important;
}

这是我的数据表：

<v-data-table
        :headers="headers"
        :items="myjson"
        class="elevation-1"
      >
        <template v-slot:items="props">
         <td>{{ props.item.ApplicationType }}</td>
        </template>
</v-data-table>

我希望 thead 的字体大小为 20px。但是在检查时它保持在 12px。

Answer 1

我有同样的问题。这是我解决它的方法：

table.v-table thead th {
      font-size: 20px !important;

 }

如果要更改<td>使用：

table.v-table tbody td {
    font-size: 18px !important;
}

确保全局添加。即在App.vue 中。

我希望它有帮助:)

Answer 2

新的更新现在应该是这个

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th,
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > th {
   font-size: 20px !important;
}

Answer 3

在 Vuetify 中，我使用 lang = "scss" 解决了

.v-data-table::v-deep th {
  font-size: 14px !important;
}
.v-data-table::v-deep td {
  font-size: 12px !important;
}