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

Question

我正在尝试以不同的方式跟踪标题背景色的链接（如何设置背景色IONIC 4），并尝试按照ionic 2和ionic 3进行操作：

我可以为离子含量设置背景颜色，但是标题不提供背景颜色。

码：

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

请您的支持。

Answer 1

似乎离子头是充当内部离子成分（例如离子工具栏）的容器。我查看了Ionic v4 ion-toolbar 文档。该组件具有许多可定制的自定义css定制属性，包括--background。这可能是您要寻找的。

假设您使用CLI创建了一个“登录”页面组件，则可以将一个新的CSS类定义添加到login.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>

Answer 2

我使用以下代码段更改标头的颜色：

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

相反的主要颜色，你可以使用来自variables.scss文件中的任何自定义颜色。

Answer 3

到目前为止，我看到的所有答案似乎都取决于更改值主颜色，从而影响所有按钮和其他 UI 元素。我想要的只是让我的工具栏全部更改为一种颜色，所以这就是我放入 variables.css 的内容

ion-toolbar {
    --color: #ffffff;
    --background: #0d2c6c;
}

Answer 4

在你的variable.scss中

--ion-toolbar-background: var(--ion-color-primary)

或者，如果您想为单个页面设置背景，则可以定义如下的CSS类：

.my-toolbar{
    --background:  var(--ion-color-primary);
}

要么

.my-toolbar{
    --background:  red;
}

或像法哈德所说

<ion-toolbar color="primary">