Ionic 4中不使用color属性修改ion-progress-bar背景色的方法

嘿，我完全懂你现在的困扰——Ionic 4的组件采用了Shadow DOM，普通的CSS选择器根本无法穿透到内部的.progress和.progress-buffer-bar元素，所以你之前尝试的嵌套选择器自然不会生效。不过别担心，我们可以利用Ionic组件暴露的CSS自定义属性来搞定这个问题，不用依赖全局的variable.scss变量。

正确的解决方案 #

Ionic的ion-progress-bar组件本身就提供了专门用于修改颜色的CSS变量，你不需要去选中Shadow DOM内部的类，直接在ion-progress-bar上设置这些变量即可：

.quizz-progress {
  ion-progress-bar {
    // 设置已填充进度条的自定义颜色
    --progress-background: #ff4500; 
    // 设置缓冲条的自定义颜色
    --buffer-background: #e0e0e0;
    // 可选：修改未填充部分的背景色
    --background: #f8f8f8;
  }
}

为什么之前的写法无效？ #

Shadow DOM的核心特性就是样式隔离，外部CSS无法直接选中Shadow DOM内部的元素（比如.progress）。Ionic为了让开发者能自定义组件样式，会提前在组件上暴露一系列CSS变量，这些变量会被传递到Shadow DOM内部，自动应用到对应的元素上。你之前试图直接选中内部类的方式，违背了Shadow DOM的设计规则，所以不会起作用。

另一种快速写法：直接在HTML中设置 #

如果你只需要给单个进度条自定义颜色，也可以直接在标签上通过style属性设置变量，更直观：

<ion-content padding>
  <div class="quizz-progress ion-text-center">
    <ion-progress-bar value="0.4" style="--progress-background: red; --buffer-background: #eee;"></ion-progress-bar>
  </div>
</ion-content>

这样修改后，你就能得到完全自定义颜色的进度条，完全不需要依赖全局的主题变量啦。

内容的提问来源于stack exchange，提问作者saperlipopette