Ionic 4 - How to set CSS Custom Properties dynamically


Has anyone figured out how to setup Ionic 4’s CSS Customer Properties dynamically? eg --background

I’ve tried below without much luck.

<ion-item button="true" (click)="action(state)" [style.--background]="colorVar" margin>           
   Some values

where in component

this.colorVar = "blue"


try with class="example" instead of [style.–background]=“blue” in html
and in the .scss =>
.example { background: blue; margin: ..... }
I do not know if it’s the best solution but I put my css like that


Is this what you’re looking for?

ion-item {
    --background: var(--ion-color-primary);
    --background: #cccccc;

Ion item css properties


I just did it at the moment
in . html

  <ion-item class="item">

in .SCSS


it works well. it all depends if we want all the <ion-items> to take the same property or not


Sorry all I should have been explicit when I meant dynamic. I want to set the background where the color is a variable as follows (as well as updating my original question):


This doesn’t work in Ionic. I actually found a solution but not sure if this the best practice as it requires the sanitizer. Keen on anyone’s else alternative on how to do this?


.action {
    --background: var(--myvar);


value: string = "blue";
  public get valueAsStyle(): any {
    return this.sanitizer.bypassSecurityTrustStyle(`--myvar: ${this.value}`);


<ion-item button=“true” (click)=“action(state)” class="action">
Some Content


thanks, I used your example and improved it by not requiring sanitizing:'--my-var', colorVar);

you also don’t need separate class, as you can set the variable inline:

<ion-button style='--background:var(--my-var)'></ion-button>


Thanks I will give this a go


i updated my reply with how to use inline set