如何更改 V-Data-Table 页脚的默认样式？答案

【问题标题】：How to change default styling of V-Data-Table footer?如何更改 V-Data-Table 页脚的默认样式？
【发布时间】：2020-03-15 02:29:04
【问题描述】：

我遇到了一个问题，我无法在v-data-table 中设置默认页脚的样式。出于某种原因，启用时分页按钮显示为白色，禁用时显示为浅灰色（禁用分页）。我已经仔细检查以确保它不是主题问题。

我的问题是：如何更改 v-data-table 中默认分页图标的颜色？更广泛地说，有什么方法可以找到 vuetify 元素的类名，这样我以后就可以避免问这些类型的问题。

谢谢。

这里有几个屏幕截图，以防我的描述足够清楚。

根据 Varun 的要求，这是我对 v-data-table 的声明之一。

<v-data-table
 :headers="headers"
 :items="tickets"
 item-key="ticketId"
 class="red--text"
></v-data-table>

结果：

使用文本着色类的建议不起作用，因为它只是将表格中的所有文本变为红色，但没有更改图标。有没有办法直接编辑图标的CSS？

【问题讨论】：

【解决方案1】：

你能分享一下代码吗？通常 v-data-table 中默认分页图标的颜色在启用时为黑色，在禁用时为灰色。您可以使用class="<color>--text" 更改文本并根据您的喜好启用图标颜色

【讨论】：

【解决方案2】：

在 Vuetify 中挖掘 CSS 文件并找到几个 v-data-table 组件的类名后，我发现这个解决方案可行。

在我的组件的样式标签内：

#table > .v-data-footer .v-icon {
  color: black;
}

小提示：如果没有!important 关键字，这只会设置页脚中启用的图标（即是否可以转到下一页）。如果您想同时设置样式，只需添加关键字即可。

【讨论】：