Zmiana koloru tła jonowej pozycji jonowej w CSS

Question

Dodałem następujący kod style="background-color: #C2A5A5 !important. Ale to nie zadziałało dla mnie. jak mogę dodać kolor tła do elementu jonowego? Z góry dziękuję.

<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> 

Answer 1

Ionic jest wstrzykiwanie elementu wewnątrz <ion-item> daje elementowi strukturę:

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

jonowej CSS zawiera właściwość CSS:

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

CSS inline ty dodaje się zastosowane do elementu znajdującego się za elementem z tłem #ffffff, więc nie widać koloru tła.

zastosować kolor tła do elementu .item-content, jak @ariestiyansyah zalecane przez dodanie następującego CSS do pliku CSS jonowe lub utworzyć niestandardowy plik CSS i obejmują <link> do niego w nagłówku, z następujących powodów:

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

Oto working demo.

Answer 2

rzeczywiście dostał to działa w inny sposób:

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

jak sugeruje @gylippus here in post #5

Answer 3

Rozwiązaniem korzysta <a> tag zamiast <ion-item> tag, na przykład: zmiana <ion-item> do <a class="item"> a następnie stylizuj to, co chcesz.

Źródło: http://ionicframework.com/docs/components/#item-icons

Answer 4

W Ionic3 poniżej css rade.

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