如何利用v-data-table中的item-class来增加字体大小？

Question

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法成功地更改了颜色，如 Vuetify 数据表：item-class 不执行任何操作 所示，但它对于调整字体大小不起作用。为此有什么需要考虑的特殊注意事项吗？

任何帮助将不胜感激。

Codepen：https://codepen.io/user1108/pen/VwRKrZW

<v-data-table
  :headers="dessertHeaders"
  :items="desserts"
  :single-expand="singleExpand"
  :expanded.sync="expanded"
  item-key="name"
  item-class="someclass"
  show-expand
  class="elevation-1"
>

Answer 1

查看检查器，可以看到字体大小是由这个规则决定的：

.v-data-table > .v-data-table__wrapper > table > tbody > tr > td, 
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > td, 
.v-data-table > .v-data-table__wrapper > table > thead > tr > td {
    font-size: .875rem;
    ...
}

如果要更改字体大小，则必须声明具有更高特异性的规则（请参阅 mdn 有关 CSS 中特异性的详细信息），或者使用

!important

覆盖特异性。

项目类在

tr

上设置，因此

my-large-font

类的规则可能如下所示：

.v-data-table > .v-data-table__wrapper > table > tbody > tr.my-large-font > td {
    font-size: 40px;
}

在代码片段中查看它是如何工作的：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :headers="headers"
            :items="items"
            item-class="size"
          />
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      headers: [
        {text: 'Id', value: 'id'}, 
        {text: 'Name', value: 'name'}, 
        {text: 'size', value: 'size'}
      ],
      items: Array.from({length: 15}, (_,i) => ({
        id: i, 
        name: 'Name '+i, 
        size: ['fs-8', 'fs-14', 'fs-26'][Math.random()*3|0],
      }))
    }
  }
})

.v-data-table > .v-data-table__wrapper > table > tbody > tr.fs-8 > td{ font-size: 8px;}
.v-data-table > .v-data-table__wrapper > table > tbody > tr.fs-14 > td{ font-size: 14px;}
.v-data-table > .v-data-table__wrapper > table > tbody > tr.fs-26 > td{ font-size: 26px;}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>