如何改变ionic 5中提醒按钮的CSS？

Question

参考图片，我想把 "No "改成红色，已经把css放在app.component.css、variables.css和golbel.css中，但没有变化。希望有人能帮帮我。

下面是我的提示代码。

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代码。

.danger  {
    color: red;
}

Answer 1

使用方法 .alert-button 里面 Global.scss

在这里你可以使用 头胎 和 幺子.

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

例如

home.page.ts

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