如何在 ionic 4 中提供警报控制器 css？答案

【问题标题】：how to give Alert Controller css in ionic 4?如何在 ionic 4 中提供警报控制器 css？
【发布时间】：2019-09-05 08:20:52
【问题描述】：

我想在 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-framework sass ionic4

【解决方案1】：

我遇到了同样的问题，这对我有用，无需使用“！important” 在 variables.scss 我添加了这个：

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

这允许为应用程序的背景设置通用颜色，但会为每个警报更改它（在这种情况下，在浅色主题上）:)

【讨论】：

【解决方案2】：

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

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

结果

因为，ion-alert 不提供CSS Custom Properties 来设置警报按钮的样式。当您也想设置警报按钮的样式时，我建议您使用定义的 cssClass 来设置警报的样式，而不是 ion-alert。

【讨论】：

【解决方案3】：

--background是组件ion-alert的css变量，所以在variables.scss中做如下操作

ion-alert
{
 --background: red !important;
}

供参考：

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

【讨论】：

我想在 alertbox 中添加 textarea 以便您帮我解决。
您想在警报的哪个位置添加它？我不认为您可以添加文本区域，您可以根据需要添加消息、子标题和标题
是的，我需要用它在 textarea 中添加 cmets。
如何在toast 中设置toast-content 的最大宽度？
第二个链接失效了