Edit ion-item style?

How can you apply style to ion-item? I can’t seem to apply any custom styles to the background or text color.

I’ve tried adding css classes to ion-content, ion-list and each ion-item, but nothings working.

I would really like to use the built-in features of ion-items such at the click animation instead of just having a ul of divs with the ‘item’ class applied.

Try to overwrite the class with your css, not the angularjs directive.

If you are referring to the ng-class directive, I have tried using that and still not results. I have tried

<ion-item ng-class="'my-class'"...

<ion-item class="my-class"...

<ion-item class="item my-class"...

<ion-item ng-class="'item my-class'"...

And several more on the <ion-content> tag. This seems to be a pretty fundamental option. Surely other people are using <ion-item>'s and applying custom styles. Even as simple as changing the text color. But I cannot find example anywhere.

Hmm you should check out the scss file, or use the included scss variables.

1 Like

I was able to modify the “item-stable…” variables to in the scss file using sass.

$item-stable-bg:                  #E0DFDB;
$item-stable-border:              #8B8989;
$item-stable-text:                #000000;
$item-stable-active-bg:           #CD9B9B;
$item-stable-active-border:       #856363;

Worked like a charm!

But what If I want to use different item styles in my app? Is there a more reliable solution?

the best is doing a simple list on css and edit by yourself
first of all will need Scss and the other things you wanna do are very boring to do and worse than doing the list by yourself

http://ionicframework.com/docs/components/#list

i hope this help someone stucked on this problem