如何在ionic 4中给Alert Controller CSS?

时间:2019-04-15 10:57:57

标签: ionic-framework sass ionic4

我想在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,但是它无法正常工作,因此请帮助我,我被困在这里。

3 个答案:

答案 0 :(得分:3)

--background是组件ion-alert的css变量,因此请在variables.scss

中执行以下操作
ion-alert
{
 --background: red !important;
}

供参考:

https://ionicframework.com/docs/theming/css-variables#ionic-variables

https://petercoding.com/2019/04/25/theming-your-app-in-ionic4/#css-custom-properties

答案 1 :(得分:1)

如果您希望使用定义的 cssClass 而不是组件 ion-alert 设置警报样式,则将以下代码添加到您的 variables.scss >

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

结果

Tested on android emulator

因为,离子警报不提供CSS Custom Properties来设置警报按钮的样式。建议您在也要设置警报按钮样式时,使用定义的 cssClass 设置警报样式,而不要使用离子警报

答案 2 :(得分:1)

我遇到了同样的问题,这对我有用,而无需使用“!important” 在variables.scss中,我添加了以下内容:

@media (prefers-color-scheme: light){
  body{
    --ion-background-color: rgb(240, 248, 240);
  }
  ion-alert{
    --ion-background-color: #ffffff;
   }
}

这允许为应用程序的背景设置常规颜色,但会为每个警报更改颜色(在这种情况下,针对浅色主题):)