css - 设置 Ionic 警报弹出元素的默认样式

Question

我遵循了此处找到的答案:Ionic 2 Alert customization

但我找不到所有其他必须设置样式的类或元素，以便让警报看起来像我想要的那样。

我编辑了我的代码，使其看起来像这样:

应用程序.scss:

.alertCustomCss {
  background-color: color($colors, dark, base);
  color: white;
  button {
      color: white !important;
  }
}

:

const alert = this.alertCtrl.create({
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss'
});
alert.present();

但这会使所有文本变白，替换包含弹出窗口的模态页面的透明度并将其设置为设置“背景颜色”(因此调用弹出窗口的页面不再可见)。按钮的文本设置为白色。

请注意弹出窗口周围的背景不再透明。

问题是如何设置文本占位符而不是整个页面的背景色？使用什么 css 属性？

更广泛的问题:可以设置样式的警报弹出窗口的元素(css 类或指令)是什么？标题文字颜色、内容文字字体等。

Answer 1

我将我所有的 AlertController.create 方法编辑为如下所示:

const alert = this.alertCtrl.create({
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss' // <- added this
});

然后我将它添加到 app.scss:

.alertCustomCss {
    color: white; // text color for basic alerts
    button {
        color: white !important;
        background-color: color($colors, secondary, base) !important;
    }
    .alert-message {
        color: white; // text color for confirm alerts
    }
    .alert-wrapper {
        background-color: color($colors, dark, base);
    }
  }