Warum funktioniert CSS nicht mehr, wenn ein Snippet in eine Direktive umgewandelt wird?

Question

machte ich eine Richtlinie für einen speziell gestalteten Kommentar Artikel (ionischen)

<comment-item file="commentItemDefault" comment="obj.comment></comment-item>

gesamten Code mit in der Vorlage das gleiche ist commentItemDefault

<ion-item ng-class="{ 'read': comment.read }"> 
    <h2>{{comment.from}}</h2> 
    <p>{{comment.copy}}</p> 
</ion-item> 

Die read Klasse wird nie angewandt.

.read{ 
    background-color: #660000 !important; 
} 

Kann mir jemand dabei helfen?

Answer 1

Lösung:

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

In ionic müssen Sie die .item-content Klasse umgehen, um benutzerdefinierte Artikelfarben und -stile zu sehen.

Ich hoffe, das hilft. Danke

Answer 2

Vielleicht gibt es eine andere Syntax ich nicht bewusst bin, aber es sieht aus wie Sie eine ungerade Variation von ng-Klasse Karte Syntax tun, die wie folgt aussieht:

<ion-item ng-class="{ 'read': comment.read }"> ... </ion-item>