Sergey Rudenko Sergey Rudenko - 2 months ago 13
Sass (Sass) Question

how to apply styles to particular Ionic components without overriding the others

I have the range component (below). And I want to style it such that its bar's height was 50px and had gradient color.

I found in the docs how to do that via theme\variables.scss (I modify this var here: $range-ios-bar-height & $range-ios-bar-background-color), but then all of my range components will get the change of style, but I need it only for a particular instance of range element.

How can I apply these changes only to a particular ion-range?

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

You can just create a class attribute to the element so that you only change the style with the same class name.

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

And then in variable.scss(or the corresponding scss file):

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

Therefore, only the ion-range with class customize will have height: 20px, for others are using default height.

You cannot override variables in sass for only one component, as it against the point of the sass variables, which meant to be global settings.