如何更改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;
    }
}

Answer 2

您需要为每个按钮指定一个类，然后在为每个按钮指定一个类时，您可以更改每个按钮的颜色。您还可以添加悬停效果以更改悬停时的颜色。

Answer 3

您可以使用cssClass

为按钮添加自定义类

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',
            cssClass: 'customClass',
            role: 'cancel',
            handler: () => noHandler(caller)
        }
    ]
});
alert.present();

}

在Css中：

.customClass{
  color:#e74c3c !important;
 }