如何更改Ionic2中Alert中按钮的颜色

Question

是否可以在Ionic2中更改Alert(Ok,Cancel)按钮的颜色？我们可以使用cssClass属性为按钮赋予颜色吗？

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

上面的代码为Ok和Cancel按钮提供了相同的颜色,如下图所示

但是我需要得到以下结果(两个按钮都是不同的颜色),

任何帮助表示赞赏......!

编辑1:添加showAlert()功能

    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();
}

Answer 1

1)第一个选项,只使用警报类,每个按钮使用css样式规则

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();
}

然后:

.buttonCss {

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

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

这样第一个按钮(nth-child(1))将是red第二个按钮(nth-child(2))green.

2)第二个选项,使用警报类,并将cssClass属性添加到每个按钮,以便在每个按钮上使用该自定义类

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();
}

然后:

.buttonCss {

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

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