如何改变Ionic2中提示按钮的颜色

Is it possible to change the color of buttons of Alert (Ok, Cancel) in Ionic2? Can we use cssClass property to give color to buttons?

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

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

The above code gives the same color to the both Ok and Cancel buttons like the below image

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

But I need to get the following result(Both button shoulb in in different color),

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

Any help is appreciated...!

任何帮助都是感激…!

Edit 1: Added showAlert() function

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

3 个解决方案

#1

1) First option, just using a class for the alert, and a css style rule for each button

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

And then:

然后:

.buttonCss {

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

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

This way the first button (nth-child(1)) will be red and the second button (nth-child(2)) will be green.

这样，第一个按钮(n -child(1))将是红色的，第二个按钮(n -child(2))将是绿色的。

2) Second option, using a class for the alert, and adding the cssClass property to each button, in order to use that custom class on each button

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

And then:

然后:

.buttonCss {

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

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

#2

You need to give each button a class, then when assigning a class to each button, you can change the colour of each individual button. Also you can add hover effects to change the colour on hover as well.

您需要给每个按钮一个类，然后在为每个按钮分配类时，您可以更改每个按钮的颜色。你也可以添加鼠标悬停效果来改变鼠标悬停的颜色。

#3

you have options to add custom class for button using cssClass

您可以选择使用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();

}

}

In Css:

在Css中:

.customClass{
  color:#e74c3c !important;
 }