设置离子警报弹出元素的默认样式

Question

我遵循此处找到的答案：Ionic 2 Alert定制

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

我编辑了代码，如下所示：

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

但这使所有文本变为白色，替换了包含弹出窗口的模式页面的透明性，并将其设置为设置“背景色”（因此，不再显示称为弹出窗口的页面）。该按钮的文本设置为白色。

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

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