更改离子进度条背景颜色

Question

我最近切换到 Ionic 4，但在使用 SCSS 时遇到了一些问题。

我有一个非常基本的主页：

<ion-content padding>

  <div class="quizz-progress ion-text-center">
    <ion-progress-bar value="0.4"></ion-progress-bar>
  </div>

</ion-content>

而且我想为我的进度条设置自定义背景颜色，而不使用 variable.scss

中设置的原色

我在运行应用程序中看到，这是 ion-progress-bar

中的结果 HTML

<div class="progress" style="transform: scaleX(0.4);"></div>
<div class="progress-buffer-bar" style="transform: scaleX(1);"></div>

这些元素在影子根中，我知道在我的 SCSS 中使用简单的 background-color: red 是行不通的。

这是我在 SCSS 文件中所做的：

.quizz-progress{
    ion-progress-bar{
        .progress{
            --background-color: var(--ion-color-primary);
        }
        .progress-buffer-bar{
            --background-color: var(--ion-color-light);
        }
    }
}

但是这个没有效果。如何在不使用 color 属性的情况下更改进度条的颜色？预先感谢您的帮助

Answer 1

这样试试

  <div class="quizz-progress ion-text-center">
    <ion-progress-bar value="0.5"></ion-progress-bar>
  </div>

.quizz-progress {
 ion-progress-bar {
    --background: green;
    --buffer-background: red;
    --progress-background: black;
  }
}

此处CSS Custom Properties

更改离子进度条背景颜色

Change ion-progress-bar background color

ionic4