クラスごとにVuetifyスタイルをオーバーライドしたい。
たとえば、ボタンの背景色をvuetifyから変更します。
だから、私はそれにクラスを持つボタンを作成します:
<div id="app">
<v-btn class="some" color="success">Success</v-btn>
</div>
.some {
background-color:red;
}
しかし、背景色の赤はvuetifyによってオーバーライドされます。
重要なテーマを使用せずにこの問題を解決するにはどうすればよいですか?
vueとスコープ付き要素を使用すると、/ deep /、>>>、:: v-deepセレクターに出会います。すべてが説明されています there 。したがって、スタイルを深くオーバーライドするには、これはルート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>
お役に立てれば。
私が見つけた回避策の1つは、以下のようなIDを含む要素にカスタムCSSの要素を指定することです。
<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>
そして、このid
を使用して、以下のようなターゲット要素を指定します
#btnGroup .dnrSelected {
background-color: #ef9a9a !important;
}
#recommendationBtnGroup .rSelected {
background-color: #dcedc8 !important;
}
#recommendationBtnGroup .srSelected {
background-color: #81c784 !important;
}
これがあなたが抱えている問題であるかどうかはわかりませんが、私は長い間それを続けていました。
スコープ付きスタイルを使用する場合(必要な場合)、子コンポーネントのクラスをターゲットにするには、ディープセレクター>>>
を使用する必要があります。ただし、ディープセレクターでSASSを使用することはできなかったので、SASSを使用するか、両方を使用する必要があります。
<style scoped>
.parent-element >>> .vuetify-class {
// values
}
</style>
<style lang="scss" scoped>
// SASS styling
</style>
ディープセレクターについては、こちらをご覧ください。 https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles