工具栏未显示 CSS 给出的颜色渐变

Question

我希望工具栏不是单一颜色，而是渐变的两种颜色。由于颜色属性只采用一种颜色，因此我必须使用 CSS 的背景属性。我在网上研究后也尝试过，但没有成功。工具栏始终保持白色。我还在下面的 StackBlitz 中重现了这个问题：

StackBlitz：https://stackblitz.com/edit/ionic-v4-rght6l?file=src/app/app.component.html

代码

Html:

<ion-header>
  <ion-toolbar>
    <ion-title>
       Hello
    </ion-title>
      <ion-buttons slot="primary">
        <ion-button>
         Bye
        </ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

CSS:

ion-toolbar {
    --ion-background-color: linear-gradient(to right, red 0%, green 100%) !important;
}

Answer 1

首先，您需要将 SCSS 文件作为组件的一部分导入：

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

接下来，您似乎应该使用 --background 而不是 --ion-background-color:

ion-toolbar {
   --background: linear-gradient(to right, red 0%, green 100%) !important;
}

工作示例：https://stackblitz.com/edit/ionic-v4-emtady

工具栏未显示 CSS 给出的颜色渐变

Toolbar is not displaying the color gradient which is given by CSS

html

css

ionic-framework

ionic4