How to apply custom/override CSS on Vuetify component?

Question

Suppose I have added the v-text-field component of Vuetify in my Vue component like

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

When I inspect that element, it generates normal HTML like

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

What I have to process, If I want to customize the Whole CSS for that v-text-field without affecting the functionality

Answer 1

Add a css class inside the component:

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

Then in the component add this to class instead of color property:

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

You can use only the predefined classes given in vuetify documentation.

If you want to use custom color on the color property you can set your own theme in Vuetify object in main.js:

Vue.use(Vuetify)

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

Now you can use the specified theme overrides in any component:

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

You can alternatively apply CSS globally in app.vue:

<style>
/* don't use scoped css */

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