Style ng-bootstrap akkordeon mit css

Ich habe eine Angular 2-Komponente mit einem Akkordeon, die ich mit ng-Bootstrap hinzugefügt. Alles funktioniert funktional, aber die Stile, die ich mit den .card, .card-header, .card-block Klassen, die die kompilierten Akkordeon-Elemente haben, zu laden versuchen, diese Stile werden überhaupt nicht auf die Elemente angewendet.Style ng-bootstrap akkordeon mit css

Diese Klassen werden von ng-bootstrap direkt gesetzt, wenn das Akkordeon in divs umgewandelt wird.

Ich wenden meine eigene CSS über eine Datei styles.scss, die ich mit der Komponente TypScript-Datei verknüpfen. Wenn alles gerendert wird, erscheinen meine Stile in den <style></style> Tags in der Kopfzeile der HTML-Ausgabe. Es sieht so aus.

<style> 
     [_nghost-xfh-23] .card[_ngcontent-xfh-23] { 
      border: none; } 

    [_nghost-xfh-23] .card-header[_ngcontent-xfh-23] { 
     margin-top: 0.75em !important; 
     border: 1px solid rgba(0, 0, 0, 0.125); } 

    [_nghost-xfh-23] .card-block[_ngcontent-xfh-23] { 
     text-align: left; } 
    </style>

Die styles.scss sieht wie folgt aus:

:host .card { 
    border: none; 
} 

:host .card-header { 
    margin-top: 0.75em !important; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
} 

:host .card-block { 
    text-align: left; 

}

Meine Vermutung ist, dass Angular 2 die Stile versucht, (während der Kompilierung) zu bewerben, aber schafft die divs mit den genannten Klassen danach machen Es ist unmöglich, die Stile auf die Elemente anzuwenden.

Im beschränkt, um die bootstrap.css direkt zu bearbeiten oder eine andere globale CSS-Datei zu erstellen. Ich hoffe, es gibt eine Möglichkeit, die CSS-Stile nach dem Laden der Komponente erneut anzuwenden, oder andere Methoden, um ng-bootstrap-Akkordeons zu gestalten.

Hoffnung mein Problem macht Sinn, Grüße Sy

Quelle

2017-01-16 svvage

Was ist das CSS dieser Klasse? Wie fügst du diese Klassen hinzu? Wie implementierst du die Stile? Wir brauchen ein bisschen mehr Informationen, um Ihnen zu helfen. – DomeTune

@DomeTune machte es ein bisschen detaillierter, hoffe das hilft. – svvage

Das klingt, als ob Sie das Schatten-DOM gefunden haben. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM Wenn Sie ': deep:' oder '>>>' zu Ihren CSS-Regeln hinzufügen –

Wie @ChristopherMoore sagte in seinem Kommentar, es war ein Problem aufgrund Schatten DOM. Hinzufügen von /deep/ repariert es. Hier der aktualisierte Funktionscode.

/deep/ .card { 
    border: none; 
} 

/deep/ .card-header { 
    margin-top: 0.75em !important; 
    border: 1px solid rgba(0, 0, 0, 0.125); 
} 

/deep/ .card-block { 
    text-align: left

Quelle

2017-01-16 18:21:32 svvage

Style ng-bootstrap akkordeon mit css

Antwort

Verwandte Themen