Wie style ich die Bestätigungsschaltflächen in Primeng ConfirmDialog modal?

Question

Ich bin verwirrt darüber, wie man die 2 'Bestätigen' und 'Abbrechen' Knöpfe in Angular's primeng Bibliothek anwendet, wenn Sie den ConfirmDialog benutzen.

ref: https://www.primefaces.org/primeng/#/confirmdialog

Ich möchte die Schaltfläche ‚Bestätigen‘ bleiben grün machen, und ändern Stil der Schaltfläche ‚Abbrechen‘ rot. Ändern der Styling im CSS für:

.ui-Widget-Header .ui-Taste, .ui-Widget-Inhalt .ui-Taste, .ui-Taste

ändert Farben auf beiden Tasten. Gibt es einen Weg dahin?

Answer 1

Sie könnten die CSS Adjacent Sibling Selector verwenden Sie die Schaltflächen zum Ziel setzt dies voraus, da nur zwei Tasten sein, die bestätigen und Abbrechen:

.ui-dialog-footer .ui-button { 
    background: /* some green color */ 
} 

.ui-dialog-footer .ui-button + .ui-button { 
    background: /* some red color */ 
} 

Die Tasten scheinen in einem Container div mit CSS-Klasse zu sein .ui-dialog-footer wenn Testen Sie die Demo in dem von Ihnen bereitgestellten Link. Wenn Ihre Implementierung jedoch über die Schaltflächen in einem anderen Container/Namespace verfügt, können Sie .ui-dialog-footer durch alles ersetzen, was Sie benötigen, um zu verhindern, dass sich die Stile auf ALLE Schaltflächen in Ihrer Anwendung auswirken.

Hier ist ein jsfiddle zeigt die Funktionalität in Aktion.

Hoffentlich hilft das!