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

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',
      inputs: [
          name: 'phone',
          type: 'number',
          placeholder: 'Enter phone number'
      buttons: [
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'alertButton',
          handler: (blah) => {
        }, {


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

//this works for alertHeader when inspecting in the browser, {
  color: #b32224;
1 Like

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.


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.