Как изменить цвет ошибки компонента Vuetify?

Question

Я пытаюсь настроить цвет моих сообщений об ошибках из моего Combobox.Я пытался переписать стиль, который я видел, применяя, но он просто не прилипает.Я видел нормальный способ применения стилей в Vuetify - это добавить [color] - текст к компоненту, но что мне нужно сделать, чтобы установить только стиль ошибки?

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

РЕДАКТИРОВАТЬ: Вот репродукция номера

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 имеет более высокий уровень специфичности , поэтому вам нужно добавить свой собственный класс и использовать его, чтобы он имел больше.
Кажется, что .app-combobox.error--text необходим для цвета строки ввода, а .app-combobox. error--text (с пробелом) для цвета дочерних компонентов, то есть текста и значков.