Ändern der Hintergrundfarbe von Ionic-Ion-Items in CSS

Ich habe den folgenden Code hinzugefügt style="background-color: #C2A5A5 !important. Aber das hat bei mir nicht funktioniert. Wie kann ich dem Ionen-Element eine Hintergrundfarbe hinzufügen? Vielen Dank im Voraus.

<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="https://stackoverflow.com/questions/31772742/{{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>

Ionic injiziert ein Element in die <ion-item> Geben Sie dem Element eine Struktur von:

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

Das ionische CSS enthält eine CSS-Eigenschaft:

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

Das hinzugefügte Inline-CSS wird auf das Element hinter dem Element mit dem angewendet #ffffff Hintergrund, sodass Sie Ihre Hintergrundfarbe nicht sehen können.

Wenden Sie die Hintergrundfarbe auf die an .item-content -Element, wie von @ariestiyansyah empfohlen, indem Sie das folgende CSS zur Ionic-CSS-Datei hinzufügen, oder erstellen Sie eine benutzerdefinierte CSS-Datei und fügen Sie a <link> dazu in der Kopfzeile mit folgendem:

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

Hier ist die funktionierende Demo.

Ich möchte meine Lösung teilen:

Ich verwende die benutzerdefinierten CSS-Eigenschaften von ionic 4. Wenn ich also die Hintergrundfarbe ändern möchte, kann ich eine neue Klasse namens “.item-background-color” erstellen und die Farbe der CSS-Eigenschaft ändern, die ich ändern möchte. Zum Beispiel:

meine-seite.page.scss

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

dann füge ich nur meine neue Klasse zum ionischen Gegenstand hinzu:

meine-seite.seite.html

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

Was getan wird, ist, die Variable zu ändern, die die Farbe des ionischen Gegenstands beeinflusst, sodass Sie alle gewünschten Klassen dynamisch oder nicht hinzufügen und die Werte ihrer jeweiligen Variablen ändern können. Informationen zu den Variablen finden Sie unter Benutzerdefinierte CSS-Eigenschaften

Ich hoffe, meine Antwort ist hilfreich für Leute, die die CSS-Eigenschaften von ionischen 4-Komponenten ändern müssen. Entschuldigung für mein schlechtes Englisch und viel Glück!

Verwenden Sie einfach Farben in variables.scss Datei (man kann auch neue Farben definieren) so

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

und in deiner HTML-Datei:

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

Ionic4 bietet Farbeigenschaft, um Hintergrundfarbe zu geben

z.B

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

Weitere Themenimmobilien finden Sie hier https://ionicframework.com/docs/theming/basics

Referenzdokument: https://ionicframework.com/docs/api/item

Hier die neuste Lösung:

ion-item {
  --ion-item-background: #ddd;
}

Eigentlich funktioniert es anders:

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

wie von @gylippus vorgeschlagen Hier in Beitrag #5

Ich habe ein Farbschema in variable.scss erstellt

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

Verwendung:

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