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!

Ionic is injecting an element inside the <ion-item> giving the element a structure of:

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

The Ionic CSS contains a CSS property:

.item-content {
  background-color:#ffffff;
}

The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.

Apply the background color to the .item-content element, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:

.item .item-content {
  background-color: transparent !important;
}

Here's the working demo.