web-dev-qa-db-ja.com

ionic 4でアラートコントローラーにCSSを与える方法？

ionic 4.でアラートコントローラースタイルを指定します。これらは私のデモコードです。

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

そして、私はglobal.scssにscssを適用しようとしました

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

私はアラートコントローラーでcssを提供するために可能な限りの方法を試してみましたが、機能しません。

ionic-frameworksassionic4
4
Aniruddh Thakor

コンポーネントion-alertではなく、定義済みのcssClassを使用してアラートのスタイルを設定する場合は、次のコードをvariables.scss

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

結果

Tested on Android emulator

ion-alertは CSSカスタムプロパティ を提供していないため、アラートボタンのスタイルを設定できません。アラートボタンのスタイルを設定する場合も、ion-alertではなく、定義済みのcssClassを使用してアラートのスタイルを設定することをお勧めします。

0
sachin rathod