Comment ajouter des styles personnalisés aux composants matériels sans rien casser

Question

J'utilise vuejs avec vuetify un support de conception matérielle pour les vuesjs, mais je suis confus quant à la façon dont je peux ajouter des styles css personnalisés à la conception matérielle sans enfreindre une convention de la matière concevoir lui-même.

C'est comme bootstrap où l'on peut appeler .row{} et remplacer le style ou est-il différent d'une certaine manière.

Answer 1

Je ne pense pas qu'il y ait beaucoup de différences de bootstrap puisque vuetify ajoutera automatiquement les noms de classes nécessaires pour vous. Supposons que vous souhaitiez remplacer la couleur d'arrière-plan du modèle suivant.

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

remplacer simplement avec .row

.row { 
    background: #123456; 
} 

Vérifier l'exemple ci-dessous.

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>

S'il vous plaît notez que - a été converti en __ (par exemple v-card-text) et theme-- a été ajouté au début du nom du thème (par exemple dark).