如何更改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（带有空格）来着色子组件，即文本和图标。

Answer 2

我正在将Nuxt与Vuetify模块一起使用。我刚刚更新了nuxt.config.js中的错误颜色，对我来说一切正常。