Как изменить цвет ошибки компонента Vuetify?
Я пытаюсь настроить цвет моих сообщений об ошибках из моего Combobox. Я попытался перезаписать стиль, который, как я видел, применялся, но он просто не прилипает. Я видел, что обычный способ применения стилей в Vuetify — это добавить [color]--text к компоненту, но что мне нужно сделать, чтобы установить только стиль ошибки?
<style>
.error--text {
color:rgb(0, 0, 0) !important;
caret-color: rgb(2, 0, 0) !important;
}
</style>
Обновлено: Вот воспроизведение проблемы
Ответы 2
Добавьте произвольный класс к вашему компоненту (например, 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 (с пробелом) для окрашивания дочерних компонентов, т.е. текста и значков.
Я использую Nuxt с модулем Vuetify. Я только что обновил цвет ошибки в nuxt.config.js, и у меня все работает нормально.
Что не так с вашим подходом (кроме использования глобального стиля, но это легко решить, установив идентификатор/класс или используя стили с областью видимости)? Можешь воспроизвести на codepen?