Vuetify - 将 v-data-table 字体大小更改为 css 不起作用

Question

我编辑了 css 代码来更改 v-data-table 的字体大小。它不起作用，但是可以更改 table body 的字体粗细。 codepen

.v-data-table td{
  font-weight:bold;
  font-size:24px;
}

.v-data-table th{
  font-weight:bold;
  font-size:24px;
}

Answer 1

Vuetify 对大量属性进行硬编码。为了覆盖 Vuetify 样式规则，您需要至少使用相同级别的特异性或使用 !important.

这是适合您的用例的选择器：

.v-data-table>.v-data-table__wrapper>table>tbody>tr>td {...}

这里有一个 pen 显示它。

要找到正确的选择器，您应该检查元素并找到要覆盖的规则的设置位置。