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

【问题标题】：Setting default style of Ionic alert popup elements设置离子警报弹出元素的默认样式
【发布时间】：2018-04-20 20:23:01
【问题描述】：

我按照这里找到的答案：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();

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

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

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

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

【问题讨论】：

页面中的所有元素都可以通过css设置样式。所以你只需要找到类并添加你的风格。如果它不起作用，那么你的风格是错误的。你需要找到一种方法来纠正它。它只是 html 和 css，不需要 Ionic 知识。请记住，某些样式需要!important 覆盖
@Duannx 谢谢你的建议。你知道我必须设置哪些 css 属性来更改离子警报窗口的背景吗？你用什么来改变你的？或者更好的是我在哪里可以找到这些信息？文档对此没有多说
只需在浏览器开发工具中检查您的元素。您将找到所有需要样式的类。

标签： css ionic-framework ionic2 ionic3

【解决方案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);
    }
  }

【讨论】：

【解决方案2】：

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

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

然后您通常将该类添加到 app.scss 中，即使您没有为警报对象定义 cssClass 属性，它也会应用。

这不是 OOTB 方式，但我认为你可以更好地控制风格...

【讨论】：