如何將樣式應用於特定的離子組件而不會覆蓋其他組件

我有範圍組件（如下）。我想要設計它的條紋高度爲50px並且具有漸變色。如何將樣式應用於特定的離子組件而不會覆蓋其他組件

我在文檔中找到了如何通過主題\ variables.scss（我在這裏修改這個var：$ 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>

來源

2017-08-27 Sergey Rudenko

我在一些源文件中發現了這些類：.range-ios .range-bar，並試圖通過.range-ios .range-bar {height：20px;}來玩這些類。所以它確實適用了變化，但是仍然適用於所有的範圍... –

您只需創建一個類屬性的元素，讓你只能用相同的類名更改樣式。

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

然後在variable.scss（或相應的SCSS文件）：

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

因此，只有離子範圍與類定製將具有高度：20像素，爲他人使用默認高度。

您不能在青菜覆蓋變量只有一個組成部分，因爲它對抗薩斯變量，這意味着是全局設置的點。

來源

2017-08-28 02:29:03 VICTOR

嘿維克多 - 現在檢查這個 –

不幸的是，這對離子不起作用。當我在括號內添加任何內容時，沒有任何效果;（ –

基本上效果在那裏，但是對於元素的一般「高度」而不是對吧 –

如何將樣式應用於特定的離子組件而不會覆蓋其他組件

回答

相關問題