覆盖 v-btn 上的禁用样式答案

【问题标题】：Override disabled style on v-btn覆盖 v-btn 上的禁用样式
【发布时间】：2022-08-11 23:56:08
【问题描述】：

我试图为按钮的禁用状态覆盖固有的 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;
}

除非我在开发人员工具中取消选中 2 种样式，否则背景颜色不起作用：

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

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

标签： css vuetify.js

【解决方案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;
}

【讨论】：

【解决方案2】：

对于使用 Vuetify 3 的每个人，您都可以像这样使用 css 变量：

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

显然，如果您使用的是深色主题，您应该这样做：

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

我不确定这是否适用于 vuetify 2

【讨论】：