Wev*_*ved 2 css vue.js vuetify.js
我想按类覆盖vuetify样式。
例如，从vuetify更改按钮的背景颜色。
因此，我创建了一个带有类的按钮：
<div id="app">
<v-btn class="some" color="success">Success</v-btn>
</div>
.some {
background-color:red;
}
但是背景色红色被vuetify覆盖。
如何在不使用重要主题的情况下解决此问题？
gab*_*uff 15
使用 vue 和作用域元素，您将遇到 /deep/、>>>、::v-deep 选择器。一切都在那里解释。因此，如果您想更深地覆盖样式，这意味着您的根 vuetify 组件的子项的样式，您将需要将::v-deep选择器与scoped属性一起使用。
这给你：
<style scoped>
.parent-element >>> .vuetify-class {
// values
}
</style>
<style lang="scss" scoped>
.vuetify-class {
::v-deep other-class {
// your custom css properties
}
}
</style>
希望这可以帮助。
与Vuetify一起工作过，它的样式多种多样……古怪。
直接对元素的样式（img）设置样式，而不是应用自己的类从来都不是一个好习惯。
这样，您就可以.my-card.v-card在保持样式范围不变的同时声明并赢得特异性战争（非范围可以使恶魔在vue文件中进行调试）。
一些Vuetify样式声明使用!important...，所以我发现覆盖这些样式的唯一方法也是!important在覆盖上使用。Vuetify对IMO做出任何 !important样式都做出了可怕的决定。
振作起来也很不错，>>>, /deep/, ::v-deep因为它可以提供解决方案，使样式不会被过滤掉。
小智 5
尝试不要限定您的样式范围，例如：
<body>
<img :src="userImg" alt="avatar">
</body>这行不通
<style scoped>
.img {
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 50% !important;
overflow: hidden;
}
.img img {
width: 100%;
}
</style>
这会起作用
<style scoped>
.img {
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 50% !important;
overflow: hidden;
}
.img img {
width: 100%;
}
</style>
| 归档时间： |
|
| 查看次数： |
10837 次 |
| 最近记录： |