How to override vuetify styles?

问题

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

回答1:

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.

回答2:

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>

来源：https://stackoverflow.com/questions/52310060/how-to-override-vuetify-styles

标签

css

Vue.js

vuetify.js