ionic-framework - 如何在ionic 4中设置标题背景颜色

Question

我正在以不同的方式尝试使用链接( How to set background color IONIC 4 )获取标题背景颜色，并按照 ionic 2 和 ionic 3 进行尝试:

我能够为 ionic 内容制作背景颜色，但标题没有背景颜色。

代码:

<ion-header>
    <ion-toolbar style="background-color: red">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

请需要您的支持。

Answer 1

似乎 ionic 头更像是一个内部 ionic 组件(如 ionic 工具栏)的容器。我查看了 Ionic v4 ionic 工具栏 documentation .这个组件有很多自定义的css自定义属性，包括--background，可以自定义。这可能就是你要找的。

假设您使用 CLI 创建了一个“登录”页面组件，您可以向 添加一个新的 css 类定义。登录.scss 文件:

.new-background-color{
    --background: #54d61c;
}

然后在您的 中引用它login.page.html 文件:

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>