web-dev-qa-db-fra.com

Comment remplacer les styles vuetify?

Je veux remplacer le style vuetify par classe.

Par exemple, pour changer la couleur d'arrière-plan du bouton de vuetify.

Donc, je crée un bouton avec classe dessus:

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

.some {
background-color:red;
}

Mais la couleur de fond rouge est remplacée par vuetify.

Comment résoudre ce problème sans utiliser des thèmes et des thèmes importants?

Voici un exemple: https://stackblitz.com/edit/vue-js-gpkj6k

cssvue.jsvuetify.js
7
Weved

Avec vue et les éléments de portée, vous rencontrerez les sélecteurs/deep /, >>>, :: v-deep. Tout est expliqué là . Donc si vous voulez pour remplacer un style en profondeur, cela signifie un style d'un enfant de votre composant racine vuetify que vous devrez utiliser ::v-deep sélecteur avec l'attribut scoped.

Cela vous donne:

<style scoped>
.parent-element >>> .vuetify-class {
  // values
}
</style>

<style lang="scss" scoped>
  .vuetify-class {
    ::v-deep other-class {
      // your custom css properties
    }
  }
</style>

J'espère que cela t'aides.

0
gabrielstuff

Une solution de contournement que j'ai trouvée consiste à cibler les éléments spécifiquement dans le CSS personnalisé en donnant à l'élément contenant un ID comme ci-dessous

<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>

Et puis en utilisant ce id pour spécifier les éléments cibles comme ci-dessous

#btnGroup .dnrSelected {
  background-color: #ef9a9a !important;
}
#recommendationBtnGroup .rSelected {
  background-color: #dcedc8 !important;
}
#recommendationBtnGroup .srSelected {
  background-color: #81c784 !important;
}
0
Meena Chaudhary

Je ne sais pas si c'est/sera un problème que vous rencontrez, mais je suis resté coincé dessus pendant longtemps.

Si vous utilisez un style délimité (ce que vous devriez), vous devrez utiliser le sélecteur profond >>> pour cibler les classes de composants enfants. Cependant, je ne pourrais jamais faire fonctionner le sélecteur profond avec SASS, vous devrez donc renoncer à utiliser SASS ou utiliser les deux.

<style scoped>
.parent-element >>> .vuetify-class {
  // values
}
</style>

<style lang="scss" scoped>
  // SASS styling
</style>

Vous pouvez lire sur le sélecteur profond ici: https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

0
Josh