何も壊さずにマテリアルコンポーネントにカスタムスタイルを追加する方法

Question

vuejsをvuetifyで使用していますが、材料のコンベンションを破ることなくマテリアルデザインにカスタムCSSスタイルを追加する方法が混乱していますデザインそのもの。

.row{}と呼ぶことができ、スタイリングをオーバーライドするブートストラップのようなものですか、それともいくつかの点で違いますか？

Answer 1

vuetifyは自動的に必要なクラス名を追加するので、ブートストラップとの違いはあまりありません。次のテンプレートの背景色をオーバーライドするとします。

<v-layout row justify-space-around></v-layout> 

だけ.row

.row { 
    background: #123456; 
} 

でそれをオーバーライドするには、以下のサンプルを確認してください。

new Vue({ el: '#app' })

.row { 
 
    background: #123456; 
 
} 
 

 
.theme--dark { 
 
    width: 400px; 
 
} 
 

 
.card__text { 
 
    font-weight: 800; 
 
}

<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> 
 
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
 

 
    <div id="app"> 
 
    <v-app> 
 
     <main> 
 
     <v-layout row justify-space-around> 
 
     <v-card dark class="primary"> 
 
      <v-card-text>one</v-card-text> 
 
     </v-card> 
 
     </v-layout>   
 
     </main> 
 
    </v-app> 
 
    </div>

が-がテーマの名前（例えばdark）の前に追加された（例えばv-card-text）__とtheme--に変換されたことに注意してください。