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

Question

我遇到了一个问题，我无法在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？

Answer 1

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

在我的组件中的style标签中：

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

小提示:如果没有!important关键字，这将仅对页脚中启用的图标进行样式设置(例如，您是否可以转到下一页)。如果你想同时设置两种样式，只需添加关键字和good to go即可。

Answer 2

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