Vueが、最近、サードパーティ製の要素-UI UIコンポーネントライブラリを使用してバックエンドの管理システムを開発しました。いくつかは、我々が変更したいということですが、常にサードパーティのコンポーネントのデフォルトスタイルの数が存在することを知っている人が使用するコンポーネントライブラリ。
まず、基本的には（学びの<style> </スタイル>のプロパティをスコープされます）
同じスタイル名セレクタの設定で親コンポーネントを防ぐために、コードを書くの過程でVueのは、サブコンポーネントに影響を与え、我々は<スタイル>の属性をスコープ</スタイル>タグセットを与える傾向があります。スコープの属性が設定されている場合は、アセンブリ内のCSSは、現在の要素の集合体に作用することができます。
実際には、以下の変換PostCSSを使用することによって達成されます。
<テンプレート>
<DIV CLASS = "例"> HI </ div>
</テンプレート>
<スタイルスコープ>
。実施例{
色：赤。
}
</スタイル>
変換：
<テンプレート>
<DIV CLASS = "例"データ-V-f3f3eg9> HI </ div>
</テンプレート>
<スタイル>
。実施例[データ-V-f3f3eg9] {
色：赤。
}
</スタイル>
もちろん、我々はまた、混合ローカルおよびグローバルスタイルスタイルを使用することができます。
<スタイル>
/ *グローバルスタイル* /
</スタイル>
<スタイルスコープ>
/ *ローカルのスタイル* /
</スタイル>
スタイルサブアセンブリのルート要素結果、だけでなく、個別に記載さ：
使用 scoped スタイルの親要素は、サブアセンブリ内に浸透しません。しかし、ルートコンポーネントスコープCSSの子もスコープCSSコンポーネントと、影響を受けた親のサブアセンブリに影響します。これは、親コンポーネントは、ルート要素のそのサブコンポーネントのスタイルを調整し、レイアウトの観点からすることができるように設計されています。
第二に、問題は（サードパーティ製のコンポーネントライブラリを使用する場合、デフォルトのスタイルを変更します）
次に、サードパーティのコンポーネントライブラリを使用する際に遭遇したいくつかの問題を紹介し、解決- デフォルトのスタイルを変更できません。
あなたがスタイルを設定するとき、それは不可能にデフォルトのスタイルを上書きするために最初に見つかった私は、それは重量の問題のセレクタだと思った、それは関係なく、どのようなスタイルが効果を発揮することができませんでした、クラス名を追加することが発見された、プロジェクト内の要素-UIコンポーネントライブラリを使用してください。今、私たちは、以下の提供するソリューション：
使用奥行き作用セレクタ：あなたがしたい場合は scoped 、セレクタのスタイルは、あなたが使用することができ、例えば、影響サブアセンブリのために、「より深い」取得機能することができ >>> 演算子を：
<スタイルスコープ>
II.A >>> .B {
/ *必要なスタイルサブアセンブリにセットB * /
色：赤;
}
</スタイル>
コードはにコンパイルされます。
II.A [DATA-V-f3f3eg9] .B {
/ *必要なスタイルサブアセンブリにセットB * /
色：赤;
}
しかし、いくつかは、サスのようなプリプロセッサとして正しく解決することはできません >>>。この場合、あなたは使用することができます /deep/ または ::v-deep オペレータの代わりに-両方の >>> 別名を、も動作することができます。
<スタイルスコープ>
II.A /ディープ/ .B {
/ *必要なスタイルサブアセンブリにセットB * /
色：赤;
}
</スタイル>
あなたはまだ発効していない以上/深い/見つけるのパターンを使用する場合は、再度最も高い重みを与える（重要！）を：
<スタイルスコープ>
II.A /ディープ/ .B {
/ *必要なスタイルサブアセンブリB * /に設定
カラー:!赤重要;
}
</スタイル>