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

【问题标题】：How to change error color of Vuetify component?如何更改 Vuetify 组件的错误颜色？
【发布时间】：2019-09-13 01:11:25
【问题描述】：

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

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

编辑：这是该问题的reproduction

【问题讨论】：

你的方法有什么问题（除了使用全局样式，但通过设置 id/class 或使用范围样式很容易解决）？你能在codepen上重现吗？

标签： css vue.js combobox vuetify.js

【解决方案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（带空格）为子组件（即文本和图标）着色。

【讨论】：

【解决方案2】：

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

【讨论】：