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 cs

Answer 1

If you created your specific page (let's call it Sample1) with the ionic CLI command ionic g page Sample1, you will find in your project a directory called Sample1 with 3 files: Sample1.html, Sample1.ts and Sample1.scss.

In Sample1.scss you will find:

sample1-page {

}

In that place you must define your custom css class or redefine the ionic element style and all your styles will have scope only onto the Sample1 page.

Hope this could help you

UPDATE

As Duannx mentions the alert components are not child of your page so if you put the css class into the specific page .scss file it will not be applied to the alert but if you put it into app.scss it will be applied. So this is an example:

app.scss

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

Sample1.html

Alert
Alert2

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

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

Now you will see that the button "Alert" will show a customized alert while the button "Alert2" will show the alter with the default css style