求助：修改Vuetify v-data-table表头字体大小无效的问题

可能的问题点及解决办法 #

1. 样式作用域穿透问题 #

如果你的Vue组件中<style>标签加了scoped属性，Vuetify封装的组件内部DOM会被添加专属属性，普通选择器无法匹配到。必须使用深度选择器来穿透作用域：

• Vue 3/Vuetify 3使用::v-deep：

::v-deep .theme--light .v-data-table > .v-data-table__wrapper > table > thead > tr:last-child > th {
  font-size: 16px !important; /* 替换为你需要的字号 */
}

• Vue 2/Vuetify 2使用/deep/：

/deep/ .theme--light .v-data-table > .v-data-table__wrapper > table > thead > tr:last-child > th {
  font-size: 16px !important;
}

2. 选择器层级错误 #

你原代码中的.theme--light.v-data-table是要求两个类同时作用在同一个元素上，但实际Vuetify的.theme--light类通常是加在<v-app>等父元素上，而非<v-data-table>本身。需要把选择器中的类连接符改成空格，代表后代元素：

/* 错误写法：两个类在同一元素 */
.theme--light.v-data-table { ... }

/* 正确写法：.theme--light是父元素，v-data-table是后代 */
.theme--light .v-data-table { ... }

3. 简化选择器避免匹配失败 #

嵌套过深的选择器容易因为DOM结构变动失效，可尝试简化选择器，直接匹配表头单元格：

::v-deep .v-data-table thead th {
  font-size: 16px;
}

验证步骤 #

1. 打开Chrome开发者工具，选中表头<th>元素，确认最终生效的样式是否被你的自定义样式覆盖。
2. 检查自定义样式是否出现在Elements面板的Styles标签中，若未出现，说明选择器未匹配到元素。

内容的提问来源于stack exchange，提问作者justAnAnotherCoder