Changing background color of Ionic ion-item in CSS

问题:

I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">
    <img ng-src="{{profilepic.profileimageurl}}">

    <h2>{{detail.date | date :'fullDate'}}</h2>
    <h2>{{detail.title}}</h2>
    <p>{{detail.description}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
      Delete
    </ion-option-button>

  </ion-item>

回答1:

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.

回答2:

Simply, use colors in variables.scss file (you can also define new colors) like that

$colors: (
 primary:    #f9961e,
 secondary:  #882e2e,
 danger:     #f84e4e,
 light:      #f4f4f4,
 dark:       #222,
 newColor:   #000000,
);

and in your html file:

 <ion-item color='newColor'>
    Test
 </ion-item>

回答3:

Actually got it working in a different way:

.item-complex .item-content { background-color: #262B32 !important; }

as suggested by @gylippus here in post #5

回答4:

A workaround is using <a> tag instead of <ion-item> tag, for example: change <ion-item> to <a class="item"> and then style it with whatever you want.

Source: http://ionicframework.com/docs/components/#item-icons

回答5:

I created a color scheme in variable.scss

.ion-color-newcolor {
  --ion-color-base: #224068;
  --ion-color-contrast: #56b4d3;
}

Using:

<ion-item color="newcolor">
  <ion-label position="stacked">Name: </ion-label>
  <ion-input required type="text"></ion-input>
</ion-item>

回答6:

Ionic4 provides color property to give background-color

e.g.

 <ion-item color="light">
 </ion-item>

More theming property available here https://ionicframework.com/docs/theming/basics

Reference doc : https://ionicframework.com/docs/api/item

回答7:

In Ionic3, below css will do the trick.

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

回答8:

<ion-item>
  <div class="item-content">
  </div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}   

its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content) property would apply to the <ion-item> child elements like if we use

<ion-item>
   Something   //all css will apply into it 
</ion-item>
.item .item-content {
background-color: transparent !important;
}

I'm not able to comment that's why I am writing over here.

回答9:

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!