CODEWITHSUNDEEP
cssvuetify.js
Adri
Adri

Reputation: 365

Override disabled style on v-btn

I'm trying to override innate vuetify style for the disabled state of my buttons but I can't find the right style / classes / terms.

Here is my CSS :

.contained-btn {
  color: white !important;
  background-color: blue !important;
  border-radius: 4px !important;
}

.contained-btn:disabled {
  background-color: #DDE5ED !important;
  color: black !important;
}

.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined):not(.contained-btn) {
  background-color: unset !important;
  border-color: unset !important;
}

.theme--light.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
  background-color: revert !important;
}

The background-color doesn't work except if I uncheck those 2 styles in my developer tool :

enter image description here

For the color I have to uncheck this too :

enter image description here

How can I traduce this "uncheck" in my CSS please ?

Upvotes: 0

Views: 2384

Answers (2)

user3413723
user3413723

Reputation: 12263

For everybody using Vuetify 3, you can use css variables like this:

html body .v-theme--light {
    --v-disabled-opacity: 1;
}

Obviously, if you are using the dark theme you should do this:

html body .v-theme--dark {
    --v-disabled-opacity: 1;
}

I'm not sure if this works for vuetify 2

Upvotes: 1

Adri
Adri

Reputation: 365

I finally found the solution by adding this style :

.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
  background-color: #DDE5ED !important;
  color: black !important;
}

Instead of :

.theme--light.v-btn.v-btn--disabled.contained-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) {
  background-color: revert !important;
}

Upvotes: 0

Related Questions