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

Question

如何更改 Vuetifyv-text-fields输入文本颜色。我尝试了很多方法，但没有一个有效。

在此输入图像描述

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

Answer 1

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

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

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

在模板中，

    <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>

Answer 2

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