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

Solution

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>

Comments

[Ronak Solanki]

okay, but what to do if I want to customize all the CSS for the particular vuetify component and don't want to use !important CSS property.

[chans]

Just check the css class in the developer console and override the class with your own style in app.vue

[Ronak Solanki]

Okay got it, Thank You so much

[Ronak Solanki]

If you have any links where i can design mobile views as well as desktop views with vuetify material design, please share...

[chans]

Read about grid layouts in vuetify, that is more than enough to make your views mobile responsive