他のものを上書きせずに特定のIonicコンポーネントにスタイルを適用する方法

Question

私は以下の範囲のコンポーネントを持っています。そして、バーの高さが50pxでグラデーションカラーを持つようにスタイルを設定したいと思います。

テーマ\ variables.scssでこれを行う方法が見つかりました（この変数はここで変更します：$ range-ios-bar-height & $ range-ios-bar-background-color）。私の範囲コンポーネントのスタイルの変更を取得しますが、私は範囲要素の特定のインスタンスのためだけにそれが必要です。

どのようにこれらの変更を特定のイオン範囲にのみ適用できますか？

<ion-range min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider"> 
    <ion-icon range-left small name="palette"></ion-icon> 
    <ion-icon range-right name="palette"></ion-icon> 
</ion-range> 

Answer 1

だけ同じクラス名とスタイルを変更するようにあなただけの要素にクラス属性を作成することができます。

variable.scss（または対応するSCSSファイル）で

<ion-range class="customize" min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider"> 
    <ion-icon range-left small name="palette"></ion-icon> 
    <ion-icon range-right name="palette"></ion-icon> 
</ion-range> 

そして：20ピクセル、他の人のためのデフォルトの高さを使用している：

ion-range{ 
    &.customize{ 
     height: 20px; 
    } 
} 

したがって、クラスカスタマイズを持つ唯一のイオン範囲は高さがあります。

あなたはグローバル設定であることを意味しSASS変数のポイントに対するそれとしてだけつの構成要素についてSASSでできないオーバーライド変数。