如何更改 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

在global.scss

中使用.alert-button

这里可以使用first-child and nth-child.

 .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();
  }

如何更改 ionic 5 中警报按钮的 CSS？

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

ionic4