24

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>

.some {
background-color:red;
}

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

2

8 Answers 8

30

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.

25

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.

11
  • 7
    Just introducing Vuetify into my project broke all kinds of styling, even when I have my styles loading after it in the pipeline. Perhaps the single most frustrating one is the fact that input, select, and button ALL have no borders now. In a form-heavy app, adding classes to every one of these elements is time-consuming. Even adding it to <style> tags didn't help. Very developer-unfriendly.
    – trpt4him
    May 31, 2019 at 17:59
  • 2
    I also make a habit to have global override stylesheets, targeting vendor styling. So, not in your component files, but within a separate stylesheet that you would import into main.js. That is... only if you want to override all vuetify input styling, for example. This way you avoid adding classes etc to the vuetify elements too.
    – 4uroraskye
    Jun 1, 2019 at 18:09
  • 2
    Going through process of customizing vuetify components - ` win the specificity war` is a great way of describing it haha
    – Be Kind
    Jul 26, 2019 at 10:41
  • 2
    @trpt4him, you can pump up the specificity of any SCSS rules by wrapping them in body:not(#_){ ... code here } (assuming your <body> element doesn't have id="_"). Obviously, you don't need to use body per se but it's a good practice to limit the assertion of :not() to as few elements as possible. If you want, it's a custom !important which doesn't cross the line of not being overrideable by inline styles (so it doesn't break JS styling) and, as you can see, it doesn't need to know any ancestor id or class.
    – tao
    Apr 12, 2020 at 14:12
  • 1
    Plus 1 just for the "... eccentricities ...". Made my day since it is so true Jul 8, 2020 at 1:19
5

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>

1
  • 6
    This is fine, if you don't mind that your styles may bleed into other places. I find it best when working with Vue, to always scope styles - there is usually another way round styling elements without resorting to unscoping styles.
    – 4uroraskye
    Aug 2, 2019 at 11:13
3

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;
}
1

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;
  }
}
0

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

0

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!

0

htl div

In Vue 3 And Vuetify 3:

<div class="v-responsive v-img" style="width: 85vw;">
div:deep(.v-img) {
  overflow: visible;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.