How to change the colors of header and button in ion-alert (ionic-5)

Ionic Framework
1

I have tried most options to change the color of header and buttons in ion-alert. What could be the solution?

async resetPin() {
    const alert = await this.alertController.create({
      header: 'Reset Pin',
      cssClass:'alertHeader',
      inputs: [
        {
          name: 'phone',
          type: 'number',
          placeholder: 'Enter phone number'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'alertButton',
          handler: (blah) => {
            alert.dismiss();
          }
        }, {
  ...
..

c.scss

.alertHeader {
   color: #b52024 !important;
  // --color: #b52024 !important;
}
h2.alertHeader {
  color: #b52024 !important;
 // --color: #b52024 !important;
}

//this works for alertHeader when inspecting in the browser
.alert-sub-title.sc-ion-alert-md, .alert-title.sc-ion-alert-md {
  color: #b32224;
}
1 Like
2

Put the css for .alertHeader in theme.scss or some global stylesheet. Since alerts are global components, the css needs to be global and not scoped to a component.

4 Likes
3

Thanks for the solution. I would wish to know more about global components and whatever may be the opposite of global in ionic context. Kindly explain or point me to some sources.