web-dev-qa-db-fra.com

Comment remplacer les styles étendus dans les composants Vue?

Économisons, j'ai un .Vue composant que je récupère quelque part sur Github. Appelons-le CompB et nous y ajouterons un seul ensemble de règles CSS pour un en-tête bleu:

CompB.Vue (une dépendance que je ne possède pas, peut-être tirée de Github)

<template>
  ...
</template>

<script>
  ...
</script>

<style lang="scss" scoped>
  .compb-header {
    color: blue;
  }
</style>

J'ai l'intention d'imbriquer CompB dans la CompA de mon propre projet. Maintenant, quelles sont mes options pour remplacer la règle de portée?

csswebpackvue.jsvuejs2
10
prograhammer

Après avoir joué un peu, je pense que j'ai une bonne approche.

  1. Remplacements globaux

    Pour les situations où je veux remplacer les règles dans tous les cas pour CompB, je peux ajouter un ensemble de règles avec plus de spécificité comme ceci: #app .compb-header { .. }. Puisque nous n'avons toujours qu'une seule racine (#app) il est sûr d'utiliser un ID dans l'ensemble de règles. Cela remplace facilement les règles de portée dans CompB.

  2. Remplacement des parents

    Pour les situations où je souhaite remplacer les règles globales et étendues. Heureusement, VueJS permet d'ajouter à la fois un bloc de style délimité et non délimité dans un fichier .Vue. Je peux donc ajouter un ensemble de règles CSS encore plus spécifique. Notez également que je peux passer une classe dans les accessoires de CompB puisque Vue fournit des accessoires de classe et de style intégrés pour tous les composants:

    // in CompA (the parent)

<template>
  ...
  <!-- Vue provides built-in class and style props for all comps -->
  <compb class="compb"></compb>  
</template>

<script>
  ...
</script>

<style lang="scss">
  #app .compb .compb-header { 
    color: red; 
  }
</style>

<style lang="scss" scoped>
  ...
</style>

    (remarque: vous pouvez être plus précis et faire en sorte que la classe que vous transmettez à CompB ait un nom plus unique tel que .compa-compb ou un suffixe de hachage afin qu'il n'y ait aucun risque de collision avec d'autres composants qui utilisent CompB et une classe .compb. Mais je pense que cela pourrait être exagéré pour la plupart des applications.)

  3. Et bien sûr, CompB peut fournir ses propres accessoires supplémentaires pour ajuster CSS ou passer des classes/styles dans les zones du composant. Mais cela peut ne pas toujours être le cas lorsque vous utilisez un composant que vous ne possédez pas (sauf si vous le forkez). De plus, même avec cela, il y a toujours des situations où vous vous dites "Je veux juste ajuster un peu le rembourrage!". Les deux solutions ci-dessus semblent très bien fonctionner pour cela.

18
prograhammer

Vous devrez ajouter plus de poids de spécificité à votre CSS. Vous devez encapsuler ce composant dans une autre classe afin de pouvoir le remplacer. Voici le code complet

<template>
  <div class="wrapper">
    <comp-b>...</comp-b>
  </div>
</template>

<script>
import CompB from 'xxx/CompB'

export default {
  components: {
    CompB
  }
}
</script>

<style>
  .wrapper .compb-header {
    color: red;
  }
</style>
3
CodinCat