【问题标题】：Ionic 3 alertCtrl custom cssClass not workingIonic 3 alertCtrl 自定义 cssClass 不起作用
【发布时间】：2018-05-08 23:50:24
【问题描述】：

我按照官方文档，我的代码如下：

let alert = this.alertCtrl.create({
  title: 'Alert',
  subTitle: 'Subtitle',
  message: 'This is an alert message.',
  buttons: ['OK'],
  cssClass: 'profalert'
});

alert.present();

还有我的 CSS：

.profalert{
    color:#e7333c;
    background-color: red;

}

但这并没有改变警告框的颜色。我也试过alert .setCssClass('profalert');

我已经检查过this

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

它工作正常。您只需在app.scss 文件中声明它。

app.scss

.profalert{
    color:#e7333c;
    background-color: red;

}

结果：

当我将您的样式应用到我的应用程序的警报框时：

【讨论】：

谢谢，我在 page.scss 中添加了 css。在 app.scss 中添加 css 后它的工作。
知道为什么它应该在 app.css 中吗？
你需要全局应用。然后只有它起作用。 @乔治
好的，谢谢，我只是想知道为什么...我认为这是优先事项或其他问题

【解决方案2】：

如果您使用的是 Ionic 4，请添加：

.profalert{
color:#e7333c;
background-color: red;
}

到 global.scss

如果对警报控制按钮的水平对齐感兴趣，请查看我的答案here

如果您要从旧版本迁移到 ionic 4.x，请查看this repo 了解重大更改。

【讨论】：

【解决方案3】：

要详细说明以前的答案，您实际上可以在 page.css 中执行此操作，但它需要位于 page-name{ } 之外，如下所示：

page-name{

}

.profalert{
    color:#e7333c;
    background-color: red;

}

【讨论】：

【解决方案4】：

.profalert {
    color:#e7333c;
    background-color: red;
}

1.在ionic4的global.scss中添加scss-class，
2.在ionic3的app.scss中添加scss-class，
你应该在根 scss 文件中添加 scss-class

【讨论】：

【解决方案5】：

在 Angular 中，特定页面的 CSS 仅适用于该页面的元素。即使 Alert 可以在页面内显示，ion-alert 元素也会附加到当前页面之外。这意味着任何自定义样式都需要放在全局样式表文件中。在 Ionic Angular 启动器中，这可以是 src/global.scss 文件，或者您可以通过添加到 angular.json 中的样式构建选项来注册新的全局样式文件。Style Placement

【讨论】：