如何覆盖vuetify样式? [英] How to override vuetify styles?

问题描述

我想按类覆盖vuetify样式.

例如，从vuetify更改按钮的背景颜色.

因此，我创建了一个带有类的按钮:

 < div id ="app">< v-btn class ="some" color ="success">成功</v-btn></div>.一些 {背景颜色:红色；} 

但是背景色红色被vuetify覆盖.

如何在不使用重要主题的情况下解决此问题?

例如: https://stackblitz.com/edit/vue-js-gpkj6k

解决方案

与Vuetify一起工作过，它的样式多种多样……古怪.>

直接对元素( img )进行样式设置，而不是应用自己的类从来都不是一种好习惯.

通过这种方式，您可以声明 .my-card.v-card 并赢得专一性战争，同时始终保持样式范围(非范围可以使恶魔在vue文件中调试)./p>

某些Vuetify样式声明使用！important ...，所以我发现覆盖这些样式的唯一方法是在覆盖上也使用！important .Vuetify做出的IMO糟糕的决定是拥有任何 ！重要样式.

最好还是绕开>>>，/deep/，:: v-deep ，因为它可以提供一种样式不被过滤的解决方案.

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

解决方案

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.

这篇关于如何覆盖vuetify样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！