设置Ionic警报弹出元素

Question

我按照这里找到的答案：Ionic 2 Alert customization

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

我编辑了我的代码，看起来像这样：

app.scss：

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

TS：

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

但这会使所有文本变为白色，取代保存弹出窗口的模态页面的透明度，并将其设置为“background-color”（因此调用弹出窗口的页面不再可见）。按钮的文本设置为白色。

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

问题是如何设置文本占位符的背景颜色而不是整个页面？使用什么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);
    }
  }

Answer 2

如果您将所需的单词括在“ span”中，例如：

title: <span class='myAlertTitle'>Special Dogs</span>

，然后您通常在app.scss中添加该类，即使您没有为Alert Object定义cssClass属性，它也将适用。

这不是OOTB的方式，但是我认为您可以更好地控制样式...