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

更改离子进度条背景色

1 个答案: