Как применить пользовательский / переопределить CSS на компоненте Vuetify? - PullRequest
Новая
       22

Как применить пользовательский / переопределить CSS на компоненте Vuetify?

1 голос
/ 19 октября 2019

Предположим, что я добавил компонент v-text-field Vuetify в свой компонент Vue, например 

<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">

Когда я проверяю этот элемент, он генерирует обычный HTML, такой как 

<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style="">
      <div class="v-input__control">
        <div class="v-input__slot">
          <div class="v-text-field__slot">
            <label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email
            </label>
            <input name="email" id="input-39" type="email">
          </div>
          <div class="v-input__append-inner">
            <div class="v-input__icon v-input__icon--">
              <i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style="">                    
              </i>
            </div>
          </div>
        </div>
      </div>
    </div>

Что мне нужно обработать, если я хочу настроить весь CSS для этого v-text-field без ущерба для функциональности

1 Ответ

0 голосов
/ 19 октября 2019

Добавьте класс CSS внутри компонента, 

<style scoped>
.text-field{
color: #90C143 !important; // this will override the existing property applied
// added whatever properties you want
}
</style>

Затем в компоненте добавьте его в класс вместо свойства цвета 

<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">

Вы можете использовать только предопределенные классы, указанные в Документация vuetify

Если вы хотите использовать собственный цвет для свойства цвета, вы можете установить собственную тему в объекте Vuetify в main.js 

Vue.use(Vuetify)

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#90C143',
        secondary: '#b0bec5',
        anchor: '#8c9eff',
      },
    },
  },
})

все текстовые поля, которые вы можете использовать следующим образом 

<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">

Тем не менее, вы хотите изменить цвет текстового поля по умолчанию в глобальном масштабе, используйте эти CSS в app.vue

// не используйте scoped 

<style>
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
    border-color: #90C143;
}

.theme--light.v-label {
    color: #90C143;
}

.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
    color: #90C143;
}
</style>
...