如何更改 Vuetify 组件的错误颜色？

Question

我正在尝试从 Combobox 调整错误消息的颜色。我试图覆盖我看到应用的样式，但它只是不坚持。我看到在 Vuetify 中应用样式的正常方法是将 [color]--text 添加到组件，但是我需要做什么来设置错误样式？

<style>
.error--text {
    color:rgb(0, 0, 0) !important;
    caret-color: rgb(2, 0, 0) !important;
}
</style>

编辑：这是问题的再现

Answer 1

代码笔

将任意类添加到您的组件（例如app-combobox）：

<v-combobox class="app-combobox"

然后样式如下：

.app-combobox.error--text,
.app-combobox .error--text {
  color: rgb(0, 0, 0) !important;
  caret-color: rgb(2, 0, 0) !important;
}

Vuetify 也使用!important，所以看起来 vuetify 样式具有更高级别的特异性，因此您需要添加自己的类并使用它以便它具有更多。
似乎.app-combobox.error--text需要为输入行着色，并且.app-combobox. error--text（带有空格）需要为子组件（即文本和图标）着色。