如何在离子中设置离子警报标题

Question

我创建了一个警报控制器并尝试设置警报的header 样式。我查看了文档，但找不到任何解决方案。

  async showAlert(header, subHeader, message) {
    const alert = await this.alertCtl.create({
      cssClass: "my-custom-class",
      header,
      subHeader,
      message,
      buttons: ["Ok"],
    });
    alert.present();
  }

如何设置提醒的标题样式？

编辑： 这是 global.scss 文件

.my-custom-class {
  .alert-wrapper {
    .alert-head {
      color: green;
    }
  }
}

已按照@Vijay Kumawat 的建议尝试过，但还是一样。

Answer 1

您必须在创建警报时向警报添加自定义类，我可以在您的警报中看到my-custom-class。您可以使用如下此类来自定义警报样式

.my-custom-class {
  .alert-wrapper {
    .alert-head {
        // header styling here eg. background
        h2 {
            // header text styling here eg. color, font size
        }
    }
  }
}

编辑：标题中的文本在 h2 标记中，因此有关文本的样式（字体大小、颜色等）将在 h2 下，否则 h2 的默认样式将覆盖直接添加到 .alert-head 的自定义 css

注意：您可以使用检查元素检查离子警报的元素结构。