ローカルオーバーライド要素-UIのデフォルトのスタイル

プロジェクトに遭遇した最近の問題は、全体的に影響を与えずに、ページ内のみ要素-UIスタイルを変更したいです

2つの方法があります。

右自体は要素が利用可能確認するために、クラスブラウザを：[追加しないでくださいスコープの重要]は、その後、ややもすることができますクラススタイルへの直接アクセスを設定1.あなたのスタイルタグに変更したいコンポーネントを追加します。

提案：それ以外の場合は、わずかにグローバルスタイルになり、スタイルで取得した親レイヤの範囲を制限するためにセレクタを追加します。

<スタイル> 
  .ruzhu-混乱.EL-フォームitem__label { 
    フォントサイズ：！16pxに重要。
  } 
  .zhuanye-混乱.EL-フォームitem__label、.zhuanye-混乱.color-T { 
    フォントサイズ：16pxに重要！。
    色：＃606266 ; 
  } 
</スタイル> 
<スタイルのlang = "SCSSは、"スコープ> 
 
  @import」を../../../assets/scss/pages/organizationUserCenter1.scss'。
 
</スタイル>

2.空気を通っ>>>範囲とカバレッジを使用します

あなたは親セレクタとして層を追加する必要があります

<スタイルスコープ> 
.charge成功>>> .EL-dialog__body { 
    高さ：85％ 。
    パディング：5％ ; 
  } 
</スタイル>

学習に興味がある場合の原理を説明するための外観を持っていることがあります。

スコープ役割：制御CSSは、このコンポーネントの現在のスタイルの範囲内で、その原理は、それは何ですか？？

スコープの原則

効果は、主にPostCSS翻訳によって達成属性VUEスコープ

以下は、VUEの変換前のコードです：

<スタイルスコープ> 
。実施例 { 
  色：赤。
} 
</スタイル> 
 
<テンプレート> 
  の<divクラス= "例">こんにちは</ DIV> 
</テンプレート>

翻訳後：

<スタイル> 
。実施例[データ-V-5558831a] { 
  色：赤。
} 
</スタイル> 
 
<テンプレート> 
  の<divクラス= "例"データ-V-5558831a>こんにちは</ DIV> 
</テンプレート>

すなわち：アセンブリのDOMを選択し、すべてのコンポーネントにPostCSS DOMは属性セレクタに対応する追加のCSSセレクタを追加し、その後、独自の動的プロパティを追加し、このアプローチは、スタイルだけあっての特性に作用することができますDOM内のdom--コンポーネント。

ローカルオーバーライド要素-UIのデフォルトのスタイル

おすすめ