How to change the CSS for an alert button in ionic 5?

user_12876683 0
Viewed 999

enter image description here

Referring to the picture, I want change the "No" to color red, Have put the css in app.component.css, variables.css and golbel.css, but noting changes. Hope that some one will help me.

Below is my alert code.

async presentAlertConfirm() {
    const alert = await this.alertController.create({
        header   : 'Logout',
        message  : 'Are you sure you want to logout?',
        buttons: [
            { text     : 'No',
              role     : 'cancel',
              cssClass : 'danger',
              handler: () => {
                  console.log('Confirm Logout: ok');
              }
            },
            { text    : 'Yes',
              handler: () => {
                  this.docDataMgr.logout();
                  this.router.navigate(['login']);
                  console.log('Confirm Okay');
              }
            }
        ]
    });
    await alert.present();
}

CSS code:

.danger  {
    color: red;
}
ionic4
1 Answers

Use .alert-button inside global.scss

Here you can use first-child and nth-child.

 .alert-wrapper { 
    .alert-button:first-child {
      color: red;
    }
  }

For example:

enter image description here

home.page.ts

  async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
      header: 'Alert Example',
      message: 'About Example data',
      buttons: ['Cancel', 'Delete']
    });
    await alert.present();
  }
user_50599160
Related