如何在 Ionic2 的警报中更改按钮的颜色答案

【问题标题】：How to change the color of buttons in Alert in Ionic2如何在 Ionic2 的警报中更改按钮的颜色
【发布时间】：2018-03-01 07:20:50
【问题描述】：

是否可以在 Ionic2 中更改警报（确定、取消）按钮的颜色？我们可以使用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();
}

【问题讨论】：

@sebaferreras ，你能帮我解决这个问题吗？
您只能在该用户在该帖子上添加评论/答案时标记该用户（由于您的评论，我没有收到任何通知，我看到此帖子只是因为我从家里进入页）。关于你的问题，请看看我的回答，如果它对你有用，请告诉我:)
@sebaferreras，谢谢你的建议，我会记住的：）。

标签： css angular typescript ionic2 ionic3

【解决方案1】：

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

【讨论】：

这是一个移动应用程序。请检查我更新的问题
就像我在答案中所说，您需要为每个按钮提供一个 id 或一个类，并为每个按钮定义 css。
使用 cssClass?

【解决方案2】：

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

【讨论】：

让我检查一下
使用 cssClass 类型的实例

【解决方案3】：

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

【讨论】：

太棒了。你又帮了我。非常感谢

编辑1：添加showAlert()函数

编辑1：添加`showAlert()`函数