Changing background color of Ionic ion-item in CSS

I want to share my solution:

I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called “.item-background-color” and change the color of the CSS property that I want to modify. For example:

my-page.page.scss

.item-background-color{
    --ion-item-background:#015f01d5;
}

then, I only add my new class to the ionic item:

my-page.page.html

<ion-item class="item-background-color">
    My item with new background color
</ion-item>

What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties

I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)