css - Hur man ändrar färgen på knappar i Alert i Ionic2


Är det möjligt att ändra färgen på knapparna i Alert (Ok, Avbryt) i Ionic2? Kan vi använda cssClass-egenskapen för att ge färg till knapparna?

.buttonCss{
    button{
        color:#e74c3c !important;
    }
}

Koden ovan ger samma färg till både Ok- och Avbryt-knapparna som på bilden nedan

Men jag behöver få följande resultat (Båda knapparna ska vara i olika färger)

All hjälp uppskattas...!

Redigera 1: Lagt till showAlert()-funktionen

    showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

Svar #1

1) Första alternativet, bara använda en klass för alerten och en CSS-stilregel för varje knapp

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

Och sedan:

.buttonCss {

    button.alert-button:nth-child(1){
      color: red;
    }

    button.alert-button:nth-child(2){
      color: green;
    }
}

På detta sätt kommer den första knappen (nth-child(1)) att vara röd och den andra knappen (nth-child(2)) att vara grön.

2) Andra alternativet, att använda en klass för alerten, och lägga till cssClass-egenskapen på varje knapp, för att använda den anpassade klassen på varje knapp

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                cssClass: 'exit-button',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'cancel-button',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

Och sedan:

.buttonCss {

    button.alert-button.exit-button{
      color: red;
    }

    button.alert-button.cancel-button{
      color: green;
    }
}

Relaterade artiklar