如何更改 Vuetify 文本字段文本输入颜色答案

【问题标题】：How to change Vuetify Text fields text input color如何更改 Vuetify 文本字段文本输入颜色
【发布时间】：2019-10-31 03:26:16
【问题描述】：

如何更改 Vuetify v-text-fields 输入文本颜色。我尝试了很多方法，但都没有奏效。

enter image description here

我尝试将“Hello”文本更改为红色。它不工作。

【问题讨论】：

你能否提供一个最小的例子来帮助你
我添加了一张图片。

标签： textfield vuetify.js

【解决方案1】：

您需要在 Styles 部分创建一个与 CSS 样式相关的文件，并将其命名为 Override。在该文件中，您可以进行所需的任何更改。将以下代码放入该文件中，您可以更改边框的颜色：

.v-text-field {
    input {
      color: rgba(169, 169, 169, 0.33);
    }
  }

【讨论】：

【解决方案2】：

如果您使用 v-custom，下面的 scss 覆盖将为您工作：

<div class="input-text-wrapper">
    <v-text-field class="input-text"/>
</div>

风格：

<style scoped lang="scss">

    .input-text {
        ::v-deep {
            .v-text-field {
                input {
                    color: blue;
                }
            }
        }
    }
</style>

【讨论】：

【解决方案3】：

对我有用的是将主题颜色导出为 css 变量（自定义属性）。代码如下

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
  },
})

然后在scss中使用如下代码：

 .v-text-field {
input {
  color: var(--v-primary-base);
}

}

【讨论】：

如果你使用作用域 css，你将不得不选择深度选择器解决方案（例如 ::v-deep）

【解决方案4】：

这行得通：

<v-text-field class="text-input-blue"/>

结合 CSS：

.text-input-blue .v-text-field__slot input {
   color: #00f !important;
}

Javascript 框架的缺点之一是 CSS 通常难以自定义。

【讨论】：

【解决方案5】：

如果您想将颜色更改为白色，只需将 props dark 添加到 v-text-input

【讨论】：

【解决方案6】：

有几种方法可以做到这一点。

一种方便的方法是在v-text-field 上设置一个类，然后使用特异性设置color 的color。

注意，不直接编辑 Vuetify 主题时需要使用!important 标志。

在模板中，

    <v-text-field class="text-green"></v-text-field>

在 CSS（例如样式标签）中，

    .text-green input {
      color: green !important;
    }

实时片段：

new Vue({
  el: '#app',
  data: () => ({
    name: 'John'
  })
})

.text-green input{
  color: green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-text-field class="text-green" v-model="name"></v-text-field>
  </v-app>
</div>

【讨论】：

我试过了，但是文字没有变成红色。
@Xuan 我已经更新了答案，因为我忘记在使用默认主题时使用!important。
这需要 :value="computedText" 吗？我收到一个错误属性或方法“computedText”未在实例中定义，但在渲染期间被引用。
一点也不。这不相关。我只是把它放在那里以模拟将显示一些生成的文本。
那就不行了。我尝试过这种做事的方式，但它对我不起作用。我又试了一次，还是不行。