Vueコンポーネントのスコープ付きスタイルをオーバーライドする方法は？

Question

私は.Vueコンポーネントを持っています。私はGithubのどこかをつかみます。さんはCOMPBそれを呼ぼうと、我々は、単一のCSSルール・セット青ヘッダーのためにそこに追加します：

CompB.Vue（私が所有していない依存関係、おそらくGitHubのからプル）

<template> 
    ... 
</template> 

<script> 
    ... 
</script> 

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

を

CompBを自分のプロジェクトのCompAにネストする予定です。スコープされたルールをオーバーライドするための私のオプションは何ですか？

Answer 1

少し遊んだ後、私は良いアプローチがあると思います。

1. グローバルは私が追加することができますCOMPBためのすべてのケースでルールを上書きしたい状況で

   をオーバーライドするルールセットこのようなより多くの特異性を有する：#app .compb-header { .. }。私たちは常に1つのルート（#app）しか持っていないので、ルールセットでIDを使うのが安全です。これは、CompBの有効範囲のルールを簡単に無効にします。

2. 親は、私は両方のグローバルとスコープのルールを上書きしたい状況で

   を上書きします。ありがたいことに、VueJSでは、スコープ付きブロックとスコープなしスタイルブロックの両方を.Vueファイルに追加することができます。だから私はより具体的なCSSのルールセットを追加することができます。 （注意

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

   ：あなたはより具体的な取得し、あなたがCOMPBに渡すクラスが持つことができます。またVueのは、ビルトインのすべてのコンポーネントのクラスとスタイルの小道具提供するので、私はCOMPBの小道具にクラスを渡すことができ気づきますもっとユニークな.compa-compbなどの名前や、いくつかのハッシュサフィックスをCOMPBとクラス.compbを使用する他の部品との衝突のための可能性がないようにします。しかし、私はそれがほとんどのアプリケーションのためにやり過ぎかもしれないと思う。）

3. そしてもちろんのCOMPBのCSSを調整したり、クラス/スタイルをコンポーネントの領域に渡すための独自の追加の小道具を提供することができます。しかし、所有していないコンポーネントを使用する場合は、必ずしもそのようになるとは限りません（フォークしない限り）。加えて、これが提供されていても、「あなたはちょうどそのパッドを少し調整したいのです！」というような状況が常にあります。上記の2つのソリューションは、このためにはうまくいくようです。

Answer 2

あなたのCSSに特異性の重みを追加する必要があります。そのコンポーネントを別のクラスにラップして、それをオーバーライドする必要があります。完全なコードはここにあります

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