[Vuejs]-Vuetify js custom style

Something was wrong with Vue Cli 3. I’ve done the same on Vue Cli 2, and “scoped” worked as expected.

I have successfully been able to override almost all vuetify component styles by creating a more specific selector chain in my css. I do this by adding my own class to the component, and then in css targeting that class with the default vuetify classes after.

For example, the <v-switch> component. In its "off" state (its v-model is false), by default the switch turns gray. I wanted it to change its color in this state, so I just added a class and changed it in the css.

html/template:

<v-switch
    v-model="myModel"
    color="primary"
    class="off-state-orange"
  ></v-switch>

css:

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__track {
  color: #f2a444;
}

.orange-off-state .v-input__control .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {
  color: #f2a444;
}