时间戳

首页 > 解决方案 > 如何更改 Vuetify 组件的错误颜色？

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

问题描述

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

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

编辑：这是问题的再现

标签： cssvue.jscomboboxvuetify.js

解决方案

密码笔

将任意类添加到您的组件（例如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（使用空格）为子组件（即文本和图标）着色。

推荐阅读