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

Question

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

enter image description here

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

Answer 1

对我有用的是将主题颜色导出为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);
}

}

Answer 2

执行此操作的方法很少。

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

请注意，当您不直接编辑Vuetify主题时，需要使用input标志。

在模板中，

!important

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

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

实时代码段：

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

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

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

Answer 3

如果要将颜色更改为白色，只需将道具dark添加到v-text-input

Answer 4

这有效：

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

结合CSS：

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

Javascript框架的缺点之一是CSS经常难以定制。

Answer 5

如果您使用的是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>