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

Question

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;
}

Answer 1

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:

home.page.ts

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