How to override vuetify styles?

Question

I want to override the vuetify style by class.

For example to change the background color of button from vuetify.

So, I create a button with class on it:

<div id="app">
  <v-btn class="some" color="success">Success</v-btn>
</div>

<style>
  .some {
    background-color: red;
  }
</style>

But the background-color red is override by vuetify.

How to solve this issue without using important and themes?

Here is example: https://stackblitz.com/edit/vue-js-gpkj6k

Answer 1

With vue and scoped elements, you will meet the /deep/, >>>, ::v-deep selectors. Everything is explained there. So if you want to override a style deep, this means a style of a child of your root vuetify component you will need to use ::v-deep selector along with scoped attribute.

This gives you:

<style scoped>
  .parent-element >>> .vuetify-class {
    // values
  }
</style>
    
<style lang="scss" scoped>
  .vuetify-class {
    ::v-deep other-class {
      // your custom css properties
    }
  }
</style>

Hope, this helps.

Answer 2

In Vue 3 And Vuetify 3:

<div class="v-responsive v-img" style="width: 85vw;">

div:deep(.v-img) {
  overflow: visible;
}

Answer 3

with Vuetify 3 you'll see a warning ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead for ::v-deep usage. The other methods didn't give my any single warning and didn't work.

The way to change the styling is, depending if you need to overwrite styling (add !important;), or simply append a new one (no need for !important;), is, with an example:

:deep() {
  .v-field__outline__end {
    border-radius: 25px!important;
    color: red;
  }
}

Answer 4

For me, the easiest way was to add my custom-reset.css file where I have put my fixes. For example if you load vuetify css like this:

import 'vuetify/dist/vuetify.min.css'

You can import your custom-reset.css file after that line, as a result you imports will look line this:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '<your_path>/custom-reset.css'
import '@mdi/font/css/materialdesignicons.css'

I had problems, vuetify styles broke AdminLte 2 styling. In my case, custom-reset.css file can look like this:

.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}

.row > .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, 
.col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, 
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, 
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, 
.col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, 
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, 
.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, 
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, 
.col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
    padding: 0px 0px 0px 0px;
    padding-right: 15px;
    padding-left: 15px;
}

select {
    -webkit-appearance: menulist; /* -webkit-appearance: none;  */
}
.v-application--wrap {
    min-height: auto;
}

Hope it will help someone!

Answer 5

Not sure if this is/will be an issue you're having, but I was stuck on it for a long time.

If you use scoped styling (which you should), you'll have to use the deep selector >>> to target classes of child components. I could never get the deep selector to work with SASS though, so you'll have to either forgo using SASS or use both.

<style scoped>
.parent-element >>> .vuetify-class {
  // values
}
</style>

<style lang="scss" scoped>
  // SASS styling
</style>

You can read about the deep selector here: https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

Answer 6

One workaround I have found is targeting the elements specifically in the custom CSS by giving the containing element an ID like below

<v-btn-toggle
 id="btnGroup"
 borderless
 dense
 group
 class="d-flex flex-column"
>
  <v-btn active-class="dnrSelected">
    <v-icon right class="mr-2">mdi-close</v-icon>
    <span>Do Not Recommend</span>
  </v-btn>
  <v-btn active-class="rSelected">
    <v-icon right class="mr-1">mdi-check</v-icon>
    <span>Recommend</span>
  </v-btn>
  <v-btn active-class="srSelected">
    <v-icon right class="mr-1">mdi-check-all</v-icon>
    <span>Strongly Recommend</span>
  </v-btn>
</v-btn-toggle>

And then using this id to specify target elements like below

#btnGroup .dnrSelected {
  background-color: #ef9a9a !important;
}
#recommendationBtnGroup .rSelected {
  background-color: #dcedc8 !important;
}
#recommendationBtnGroup .srSelected {
  background-color: #81c784 !important;
}

Answer 7

Having worked with Vuetify and it's various styling... eccentricities... I believe it's all boiled down to writing css that has more specificity than Vuetify.

It's never great practise to style element's directly (img), instead apply your own classes.

This way you could declare .my-card.v-card and win the specificity war, all the while keeping styles scoped (non scoped can the the devil to debug in vue files).

Some Vuetify style declarations use !important... so the only way I've found to override these are to also use !important on the override. IMO terrible decision from Vuetify to have any !important styles.

It's also good to get your head around >>>, /deep/, ::v-deep as can provide a solution where styles are not filtering through.

Answer 8

Try not scoping your styles for example:

<body>
<img :src="userImg" alt="avatar">
</body>

This won't work

<style scoped>
.img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50% !important;
  overflow: hidden;
}
.img img {
  width: 100%;
}
</style>

And this will work

<style>
    .img {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 50% !important;
      overflow: hidden;
    }
    .img img {
      width: 100%;
    }
    </style>