Bearbeiten von CSS für PrimeNG-Komponenten

Question

Ich entwickle derzeit eine Benutzeroberfläche mit Angular 4, Angular Materials und PrimeNG-Komponenten.

Die neueste Komponente, mit denen ich zu kämpfen ist die Multiselect-Komponente von PrimeNG: https://www.primefaces.org/primeng/#/multiselect

Ich bin einfach nur die Komponente Breite der Stammkomponente paßt 100% zu machen versuchen.

Gibt es einen bestimmten Prozess, den ich bearbeite, um CSS-Klassen für diese Komponente zu bearbeiten? Die Dokumentation sagt, "Style" für Inline zu verwenden - bedeutet das:

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect> 

Weil dies nicht funktioniert hat.

Es sagt auch, "styleClass" als eine Eigenschaft zu verwenden, um eine CSS-Klasse Styling hinzuzufügen. Wie benutzt du das?

Schließlich bieten sie eine Liste der CSS-Klassen, die die PrimeNG-Komponente auf der Website verwendet (z. B. ui-multiselect). Wenn ich versuche, 'ui-multiselect' zu modifizieren, indem ich es innerhalb des Angular components CSS deklariere, funktioniert es immer noch nicht.

Irgendwelche Ideen? Was mache ich falsch?

Answer 1

Für Inline-PrimeNG Styling verwenden Sie so etwas wie diese:

[style]="{'width': '100%'}" 

styleClass fügen Sie einfach zu benutzen:

styleClass="example-css-class" 

So zum Beispiel können Sie mit mehrere Auswahleingabefeld mit vielen anderen Stil Stilklassen, z. Bootstrap's form-control.

Wenn Sie mit PrimeNG ui arbeiten, stellen Sie sicher, dass Sie sie in Komponenten .css stecken. Wenn Sie global styles.css verwenden, müssen Sie die PrimeNG-Dateien in .angular-cli.json überschreiben. Sie können es so bearbeite styles Array tun:

"../node_modules/primeng/resources/primeng.min.css", 
"../node_modules/primeng/resources/themes/omega/theme.css", 
"styles.css" 

Wenn die styles.css nach den primeng Ressourcen gestellt werden, es wird geladen, nachdem die primeng ist, die die Stile überschreiben.