web-dev-qa-db-ja.com

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

保存しましょう.VueどこかでGithubから取得したコンポーネント。それをCompBと呼び、そこに青いヘッダー用の1つのCSSルールセットを追加します。

CompB.Vue（私が所有していない依存関係、おそらくGithubから取得）

<template>
  ...
</template>

<script>
  ...
</script>

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

私は自分のプロジェクトのCompAにCompBをネストする予定です。スコープルールを上書きするためのオプションは何ですか？

csswebpackvue.jsvuejs2
10
prograhammer

少し遊んだ後、良いアプローチができたと思います。

  1. グローバルオーバーライド

    CompBのすべてのケースでルールを上書きしたい状況では、#app .compb-header { .. }のように、より具体的なルールセットを追加できます。ルートは常に1つ（#app）しかないため、ルールセットでIDを使用しても安全です。これは、CompBのスコープルールを簡単に上書きします。

  2. 親のオーバーライド

    グローバルルールとスコープルールの両方を上書きしたい場合。ありがたいことに、VueJSでは、スコープ付きとスコープなしの両方のスタイルブロックを.Vueファイルに追加できます。そのため、さらに具体的なCSSルールセットを追加できます。 Vueはすべてのコンポーネントに組み込みのクラスとスタイルの小道具を提供するため、クラスをCompBの小道具に渡すことができることにも注意してください。

    // 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に渡すクラスに.compa-compbなどの一意の名前やハッシュサフィックスを付けることができるため、CompBを使用する他のコンポーネントとの衝突の可能性がありません。クラス.compb。しかし、ほとんどのアプリケーションにとってそれはやり過ぎかもしれません。）

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

18
prograhammer

あなたはあなたの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>
3
CodinCat