web-dev-qa-db-ja.com

Vuetifyスタイルをオーバーライドする方法は？

クラスごとにVuetifyスタイルをオーバーライドしたい。

たとえば、ボタンの背景色をvuetifyから変更します。

だから、私はそれにクラスを持つボタンを作成します：

<div id="app">
  <v-btn class="some" color="success">Success</v-btn>
</div>

.some {
background-color:red;
}

しかし、背景色の赤はvuetifyによってオーバーライドされます。

重要なテーマを使用せずにこの問題を解決するにはどうすればよいですか？

次に例を示します。 https://stackblitz.com/edit/vue-js-gpkj6k

cssvue.jsvuetify.js
7
Weved

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>

お役に立てれば。

0
gabrielstuff

私が見つけた回避策の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;
}
0
Meena Chaudhary

これがあなたが抱えている問題であるかどうかはわかりませんが、私は長い間それを続けていました。

スコープ付きスタイルを使用する場合（必要な場合）、子コンポーネントのクラスをターゲットにするには、ディープセレクター>>>を使用する必要があります。ただし、ディープセレクターで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

0
Josh