如何修改V-Data-Table分页图标颜色及查找Vuetify元素类名？

我来帮你搞定这两个Vuetify样式定制的问题，都是日常开发里常遇到的小场景～

一、直接修改分页图标的CSS样式 #

你之前给v-data-table加red--text类没生效，是因为这个类只会影响表格内的文本元素，而分页图标属于嵌套在表格内部的v-pagination组件里的子元素，得单独针对它们的类来写样式。

1. 全局样式修改（非scoped） #

如果你的样式是全局的（比如单独的CSS文件），可以直接写：

/* 启用状态下的分页图标颜色 */
.v-data-table .v-pagination__item .v-icon {
  color: #ff0000; /* 替换成你想要的颜色，比如红色 */
}

/* 禁用状态下的分页图标颜色 */
.v-data-table .v-pagination__item--disabled .v-icon {
  color: #cccccc; /* 替换成你想要的禁用浅灰色 */
}

用.v-data-table作为前缀，是为了只修改当前表格的分页图标，避免影响页面上其他的v-pagination组件。如果需要全局所有分页图标都改，去掉前缀就行。

2. 单文件组件scoped样式修改 #

如果是在Vue单文件组件的<style scoped>里写样式，需要用深度选择器来穿透scoped限制，否则样式不会作用到子组件：

<style scoped>
/* 深度选择器，Vue2可用/deep/，Vue3推荐用::v-deep */
::v-deep .v-data-table .v-pagination__item .v-icon {
  color: #ff0000;
}

::v-deep .v-data-table .v-pagination__item--disabled .v-icon {
  color: #cccccc;
}
</style>

如果你的项目还在用Vue2，把::v-deep换成/deep/就行。

二、如何查找Vuetify元素的类名 #

要自己解决类似样式问题，浏览器开发者工具是最实用的工具，步骤超简单：

• 打开浏览器的开发者工具（按F12，或者右键页面元素选择「检查」）
• 在Elements面板里，用左上角的「选择元素」按钮（鼠标箭头图标）点击你要找的分页图标，就能在面板里看到它的DOM结构和对应的类名
• 右侧Styles面板会显示该元素所有生效的CSS样式，你可以看到Vuetify给它加的类（比如.v-icon、.v-pagination__item），甚至可以临时修改样式测试效果
• 另外，Vuetify官方文档的每个组件页面，都会在「CSS Classes」部分列出该组件所有可用的类名，也可以直接去那里查

举个例子，你检查分页图标时，会看到类似这样的DOM结构：

<button class="v-pagination__item">
  <span class="v-icon notranslate material-icons theme--light">chevron_left</span>
</button>

这里的.v-pagination__item就是分页按钮的类，.v-icon是图标的类，禁用状态下按钮会多一个.v-pagination__item--disabled类，这些就是我们要针对的选择器。

这样操作下来，以后遇到任何Vuetify组件的样式定制，都能自己快速找到对应的类名来修改啦～

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