Ionic 3 alertCtrl自定义cssClass无法正常工作

Question

我遵循了官方文档，我的代码如下：

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

Answer 1

它运行正常。您只需要在app.scss文件中声明它。

app.scss

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

}

<强>结果：

当我将您的风格应用到我应用的提示框时：

Answer 2

如果您正在使用Ionic 4，请添加；

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

到 global.scss

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

如果您要从较早版本迁移到ionic 4.x，请查看this存储库中的重大更改。

Answer 3

要详细说明先前的答案，您实际上可以在page.css中完成，但它必须在页面名称{}之外，如下所示：

page-name{

}

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

}

Answer 4

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

1。在ionic4中的global.scss中添加scss类，
2.在ionic3的app.scss中添加scss类，
您应该在根scss文件中添加scss类

Answer 5

在Angular中，特定页面的CSS仅限于该页面的元素。即使可以在页面内显示警报，但离子警报元素也会附加在当前页面之外。这意味着任何自定义样式都需要放入全局样式表文件中。在Ionic Angular入门程序中，该文件可以是 src / global.scss 文件，也可以通过在angular.json中添加样式生成选项来注册新的全局样式文件。Style Placement