如何更改/覆盖Vuetify js中禁用字段的默认颜色？答案

【问题标题】：How to change / override the default color for disabled fields in Vuetify js?如何更改/覆盖Vuetify js中禁用字段的默认颜色？
【发布时间】：2018-09-02 03:42:19
【问题描述】：

默认情况下，vuetify 为禁用的文本字段/项目应用浅灰色阴影。如何将此颜色覆盖为我想要的颜色？

目前我正在使用禁用的选择器:disabled { color: #000000 !important; }，它只有助于更改文本字段文本颜色的颜色，我的表单中也有下拉菜单和复选框。有什么解决办法吗？

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

我一直在尝试使用文本字段来覆盖类，但它不起作用，但是对于所有表单输入元素都有一个名为“readonly”的便捷道具。使用“只读”而不是“禁用”。

<v-textarea placeholder="Notes" :readonly="true"></v-textarea>
<v-select :items="['Mango', 'Apple']" label="Filled style" :readonly="true"></v-select>

【讨论】：

Readonly 不会阻止点击事件，所以在这种情况下它没有多大用处。

【解决方案2】：

你可以定位

带有.input-group--disabled.checkbox .input-group__input的复选框

和下拉菜单.input-group--disabled.input-group--select label

.input-group--disabled.checkbox .input-group__input {
    color: #000 !important;
}

.input-group--disabled.input-group--select label {
    color: #000 !important;
}

Afaics 大多数课程都有--disabled 后缀，所以也许这对你有用（但我没有测试）：

[class$="--disabled"],
[class*="--disabled "] * {
    color: #000 !important; 
}

【讨论】：

感谢@traxo 第二次帮助我...请帮助我解决更多即将出现的问题：P
我为什么在开发版中看到样式更改，而在生产版中却没有？

【解决方案3】：

选择所有后代并应用颜色。

.input-group__input *
  color: rgba(0,0,0,0.87) !important

【讨论】：