Ionic 2 Alert customization

Question

I want to customize my alerts in Ionic 2. I know that I can do it globally in the variables.scss, but I want to modify a specific one, in a specific page.

I tried cssClass in the alert code, I tried other different things, that work, but globally, not for a specific one.

Is there any way to do it?

Answer 1

Edit all your AlertController.create methods to look like this:

const alert = this.alertCtrl.create({
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss' // <- added this
});

And add this to app.scss:

.alertCustomCss {
    // text color for basic alerts
    color: white; 

    // alert modal page bg color. Warning this will remove the alert transparency
    background-color: color($colors, dark, base); 

    button {
        color: white !important; // button text color
        background-color: color($colors, secondary, base) !important;
            //button bg color
    }

    .alert-message {
        color: white; // text color for confirm alerts
    }

    .alert-wrapper {
        background-color: color($colors, dark, base); // bg color of alert content
    }
  }

Answer 2

Adding the styles in app.css and calling it in page.ts

showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    });
    alert.present();
}

In App.css

.alertCustomCss{
  background-color: white;
  color: blue;
  button{
      color: blue;
  }
}