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

Question

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>

Answer 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