Gewusst wie: überschreiben scoped styles in Vue Komponenten?

Let ' s speichern habe ich eine .Vue Komponente, die schnappe ich mir aus dem Github irgendwo. Nennen wir es CompB, und wir werden das hinzufügen einer einzelnen CSS-Regel-set für einen blauen header:

CompB.Vue (eine Abhängigkeit, die ich nicht besitze, vielleicht gezogen von Github)

<template>
  ...
</template>

<script>
  ...
</script>

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

Ich Plane nest CompB in mein eigenes Projekt ist, Vergl. Nun, was sind meine Optionen für das überschreiben der Gültigkeitsbereich der Regel?

InformationsquelleAutor prograhammer | 2016-12-14

  1. 17

    Nach dem spielen ein bisschen Rum, ich denke ich habe einen guten Ansatz.

    1. Global überschreibt

      Für Situationen, in denen möchte ich überschreiben die Regeln in allen Fällen für CompB ich kann nur hinzufügen, ein Regel-set mit mehr Spezifität wie diese: #app .compb-header { .. }. Da wir immer nur einen root (#app) es ist sicher, eine ID zu verwenden, die in der Regel. Diese einfach überschreibt die bereichsbezogene Regeln in CompB.

    2. Eltern überschreibt

      Für Situationen, in denen ich außer Kraft setzen wollen sowohl die Globale und gezielte Regeln. Zum Glück VueJS ermöglicht das hinzufügen sowohl ein Gültigkeitsbereich und ohne bereichseinschränkung style-block in einem .Vue-Datei. So kann ich hinzufügen, eine noch spezifischere CSS-Regel-set. Auch bemerken, dass ich passieren kann eine Klasse in CompB Requisiten da Vue bietet integrierte class-und style-Requisiten, die für alle Komponenten: 

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

      (Hinweis: Sie können mehr spezifische und stellen Sie die Klasse, die Sie gehen in CompB haben eine einzigartige Namen wie .compa-compb oder einige hash-suffix, so ist es kein Potenzial für die Kollision mit anderen Komponenten verwenden, CompB und eine Klasse .compb. Aber ich denke, dass könnte overkill für die meisten Anwendungen.)

    3. Und natürlich CompB kann seinen eigenen zusätzlichen Requisiten für die Anpassung von CSS-oder die Verabschiedung von Klassen/styles, die in Bereichen der Komponente. Dies ist jedoch nicht immer der Fall sein, wenn Sie eine Komponente, die Sie nicht selbst (es sei denn, Sie Gabel). Plus, selbst mit dieser zur Verfügung gestellt, es gibt immer Situationen, in denen Sie wie "ich will nur anpassen, die Polsterung nur ein bisschen!". Die beiden oben genannten Lösungen scheinen sehr gut zu funktionieren.

    InformationsquelleAutor prograhammer

  2. 2

    Benötigen Sie mehr Spezifität Gewicht, um Ihre css-Dateien. Sie haben zu wickeln, die Komponente in einer anderen Klasse, so können Sie überschreiben. Hier ist der vollständige code

    <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>
    hah, antwortete in der gleichen Zeit! Siehe meine Antwort, doch ich fand einen guten Ansatz insgesamt +1
    Ich denke, die best Lösung ist, senden Sie PR -, um die Bibliothek und entfernen Sie scoped verwenden BEM oder einfach fügen Sie ein Präfix für Klassennamen
    Ja, ich finde mich noch ein mit BEM auch in diesen Gültigkeitsbereich Situationen. Aber vor kurzem habe ich festgestellt, dass Gültigkeitsbereich möglicherweise nicht so nützlich, wie ich ursprünglich dachte. Komisch, ich hatte in der Tat ein Problem, vor kurzem auf einem github-Paket zu Fragen, nur für diese (BEM und keine "Gültigkeitsbereich").
    BTW, ist das etwas Reagieren Griffe besser (zum Beispiel, können Sie Stile zu Reagieren-Komponenten um die Standardeinstellung zu überschreiben?)?
    Sehen Sie unten die Dokumentation Seite: vue-loader.vuejs.org/en/features/scoped-css.html #4 in der Notizen-Liste.

    InformationsquelleAutor CodinCat

Schreibe einen Kommentar