Как изменить цвет ввода текста в текстовых полях Vuetify - PullRequest
Новая
       34

Как изменить цвет ввода текста в текстовых полях Vuetify

0 голосов
/ 17 июня 2019

Как изменить цвет ввода текста Vuetify v-text-fields. Я пробовал много способов, но ни один из них не работал.

введите описание изображения здесь

Я попытался изменить текст «Hello» на красный. Это не работает.

1 Ответ

0 голосов
/ 17 июня 2019

Есть несколько способов сделать это.

Один удобный способ - установить класс на 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>
...