Ionic 3 alertCtrl custom cssClass not working

Question

I followed the official documentation and my code is like below:

let alert = this.alertCtrl.create({
  title: 'Alert',
  subTitle: 'Subtitle',
  message: 'This is an alert message.',
  buttons: ['OK'],
  cssClass: 'profalert'
});

alert.present();

and my CSS:

.profalert{
    color:#e7333c;
    background-color: red;

}

But this is not changing the alertbox color. I also tried alert .setCssClass('profalert');

I already checked this

Answer 1

It is working fine.You just need to declare it inside the app.scss file.

app.scss

.profalert{
    color:#e7333c;
    background-color: red;

}

Result:

When I applied your style to my app's alert box:

Answer 2

If you're working with Ionic 4 then add:

.profalert{
color:#e7333c;
background-color: red;
}

to global.scss

If interested in horizontal alignment of alert control buttons, check my answer here

If you're migrating from older versions to ionic 4.x, check out this repo for breaking changes.