覆盖 v-btn 上的禁用样式

Question

我正在尝试为我的按钮的禁用状态覆盖固有的 vuetify 样式，但我找不到正确的样式/类/条款。

这是我的 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;
}

背景颜色不起作用，除非我在我的开发者工具中取消选中这两种样式：

对于颜色，我也必须取消选中它：

请问我如何在我的 CSS 中贬低这个“取消选中”？

Answer 1

我终于通过添加这种样式找到了解决方案：

.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;
}

而不是：

.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;
}

覆盖 v-btn 上的禁用样式

Override disabled style on v-btn

css

vuetify.js