如何在 ionic 中设置 ion-alert header 的样式

Question

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

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

我如何设计警报的 header 样式？

编辑： 这是 global.scss 文件

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

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

Answer 1

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

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

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

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

如何在 ionic 中设置 ion-alert header 的样式

How to style ion-alert header in ionic

javascript

angular

typescript

ionic-framework

ionic4