how to give Alert Controller css in ionic 4?

Question

I want to give alert controller style in ionic 4.these is my demo code,

async presentalert() {
    const alert = await this.alertCtrl.create({
      header: '  DO YOU WANT TO CANCEL',
      message: 'DO YOU WANT TO CANCEL',
      cssClass: 'alertCancel',
      mode: 'ios',
      buttons: [
        {
          text: 'NO',
          role: 'cancel',
          cssClass: 'alertButton',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'YES',
          cssClass: 'alertButton',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    })
    await alert.present();
  }

and i tried to apply scss in global.scss

 .alertCancel{
    --background: red;
  }
  .alertButton {
     background-color: white !important;
  }

I have tried every possible way to give css in alert controller but it s not working so please help me I am stuck here.

Solution 1

--background is a css variable of the component ion-alert, therefore do the following in the variables.scss

ion-alert
{
 --background: red !important;
}

For reference:

https://ionicframework.com/docs/theming/css-variables#ionic-variables

Solution 2

I was having the same issue and this worked for me without needing to use "!important" in the variables.scss I added this:

@media (prefers-color-scheme: light){
  body{
    --ion-background-color: rgb(240, 248, 240);
  }
  ion-alert{
    --ion-background-color: #ffffff;
   }
}

This allows having a general color for the background of the app but changes it for every alert (on this case, on the light theme) :)

Solution 3

If you wish to style your alert using defined cssClass instead of the component ion-alert then add the following code to your variables.scss

.alertCancel{
  --background: red;
    button.alertButton{
      color: white;
    }
 }

Result

Since, ion-alert do not provide CSS Custom Properties to style alert buttons. I suggest you to use defined cssClass to style your alert rather than ion-alert when you want to style your alert buttons too.

Comments

[Aniruddh Thakor]

i want to add textarea in alertbox so can you help me on it.

[Peter Haddad]

Where do you want to add that in the alert? I don't think you can add text-area, you can add message, subheader, and header if you want

[Aniruddh Thakor]

yes exactly, i need to use it for adding comments in textarea.

[deanwilliammills]

How can I set the toast-content max width in a toast?

[m50]

the 2nd link is dead