Vuetify v-data-table 不会增加字体大小答案

【问题标题】：Vuetify v-data-table doesn't increase font sizeVuetify v-data-table 不会增加字体大小
【发布时间】：2020-03-11 03:27:52
【问题描述】：

Vuetify v-data-table 不会增加字体大小。

我如何修改表格的内容，以便能够增加文本的字体大小，因为它太小且难以阅读。

 <v-data-table
    :headers="headers"
    :items="allCareers"
    :search="search"
    sort-by="calories"
    class="elevation-1 display-2 white--green"
  >
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editArticle(item.ARTICLE_NUM)">edit</v-icon>
      <v-icon small @click="deleteSingleArticle(item.ARTICLE_NUM)">delete</v-icon>
    </template>
  </v-data-table>

风格

<style scoped>
table.v-table thead tr th {
  font-size: 24px;
}
table.v-table tbody tr td {
  font-size: 24px;
}
</style>

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

您可以在此处看到要获得您想要的东西需要特异性。使用 Vuetify 文档中的代码笔，这些更改适用于 v-data-table。请记住，Vuetify 在不使用加载器的情况下需要一些奇怪的 CSS 变通方法，例如需要使用而不是或使用 !important 标签。

https://vuetifyjs.com/en/components/data-tables （选择“在 CodePen 中编辑”来测试这些）”

.v-data-table th {
  font-size: 20px;
}

.v-data-table td {
  font-size: 20px;
}

加载器和 CSS 细节的详细信息： Vuetify - CSS not working (taking effect) inside component

【讨论】：