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

Question

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

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

编辑:这是一个 reproduction的问题

Answer 1

codepen

向您的组件添加任意类(例如 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 样式似乎具有更高级别的 specificity ，因此您需要添加自己的类并使用它，以便它有更多。
似乎.app-combobox.error--text需要为输入行着色，.app-combobox. error--text (带空格)为子组件着色，即文本和图标。