How to style ion-alert header in ionic-CodePudding

I created an alert controller and am trying to style the header of the alert. I have checked out the docs but i couldn't find any solution.

  async showAlert(header, subHeader, message) {
    const alert = await this.alertCtl.create({
      cssClass: "my-custom-class",
      header,
      subHeader,
      message,
      buttons: ["Ok"],
    });
    alert.present();
  }

How do i style the header of the alert ?.

Edit: This is the global.scss file

.my-custom-class {
  .alert-wrapper {
    .alert-head {
      color: green;
    }
  }
}

Have tried this as suggested by @Vijay Kumawat but it still the same.

CodePudding user response：

You have to add a custom class to the alert while creating the alert which I can see is my-custom-class in your alert. You can use this class as below to customize the alert style

.my-custom-class {
  .alert-wrapper {
    .alert-head {
        // header styling here eg. background
        h2 {
            // header text styling here eg. color, font size
        }
    }
  }
}

EDIT: the text in the header are in h2 tag so styling regarding text (font size, color etc. ) will go under h2 otherwise h2's default style will override the custom css added directly to .alert-head

NOTE: you can check the ion alert's element structure using inspect element.