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