3

I'm trying to adjust the color of my error messages from my Combobox. I tried to overwrite the style I saw getting applied, but it just isn't sticking. I saw the normal way to apply styles in Vuetify is to add [color]--text to a component, but what would I need to do to set just the error style?

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

EDIT: Here is a reproduction of the issue

Ph33ly
  • 663
  • 3
  • 13
  • 29
  • What's wrong with your approach (except using global style, but easily solved by setting id/class or using scoped styles)? Can you reproduce on codepen? – Traxo Apr 23 '19 at 21:00

2 Answers2

7

codepen

Add arbitrary class to your component (e.g. app-combobox):

<v-combobox class="app-combobox"

Then style like so:

.app-combobox.error--text,
.app-combobox .error--text {
  color: rgb(0, 0, 0) !important;
  caret-color: rgb(2, 0, 0) !important;
}

Vuetify uses !important as well so it seems that vuetify style has higher level of specificity, thus you need to add your own class and use it so that it has more.
It seems that .app-combobox.error--text is needed to color the input line, and .app-combobox. error--text (with space) to color child components i.e. text and icons.

Traxo
  • 18,464
  • 4
  • 75
  • 87
-1

I'm using Nuxt with Vuetify module. I just updated the error color in the nuxt.config.js, and all works fine for me.

Suv4o
  • 1