Angular 如何更改Ionic 4'；s离子范围pin字体和格式？

例如，我在global.scss文件中尝试了以下方法：

.range-pin {
  color: white;
  font-family: sans-serif;

  &after:{
    content: " %";
  }
}

ion-range {
    --pin-background: black;
    --pin-color: red;
}

---

但这没有效果。我肯定这与影子根有关，但我不确定在这里应该做什么。添加离子范围。范围引脚更具体也没有帮助。如何实现此更改？

您认为

离子范围

管脚是阴影dom的一部分，这是正确的，因此我们必须使用离子提供的SCSS变量来自定义管脚

不幸的是，Ionic文档并不总是列出所有变量，但是查看Github上range组件的主源代码，我们可以了解当前可用的变量

我查看包含可用于范围引脚的变量的：

:host {
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{ion-color(primary, base, 0.26)};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-md-slider-height};
  --pin-background: #{ion-color(primary, base)};
  --pin-color: #{ion-color(primary, contrast)};

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-size: $range-md-pin-font-size;
}

：主机

指主机组件，即离子范围。我们可以在home.page.scss文件中使用两个背景和颜色变量：

.range-pin {
  color: white;
  font-family: sans-serif;

  &after:{
    content: " %";
  }
}

ion-range {
    --pin-background: black;
    --pin-color: red;
}

由于字体系列不能作为变量使用，我们应该能够像这样直接使用它：

ion-range {
    --pin-background: black;
    --pin-color: red;
    font-family: sans-serif;
}

---

定位

：在
.range pin的
部分之后将无法工作，不幸的是，因为它是影子dom的一部分。你可能需要想出一些其他的黑魔法来得到你想要的，或者建议爱奥尼亚团队在未来的版本中添加变量：-）
虽然我的答案不是针对你的问题，但可能会帮助一些人，因为我也被困在这个问题中，我无法更改离子范围引脚和旋钮的背景色，因为在模板文件中，我已将离子范围的颜色设置为这样

<ion-range color="light" class="range" pin="true" min="18" max="32" step="1" debounce="1000</ion-range>

所以不要在模板文件中设置颜色属性
很抱歉重新打开此问题，但解决方案对我不起作用，我们仍然应该这样做吗？在global.scss和home.scss中，我添加了离子范围{--pin color:red；}但是pin中的文本仍然是黑色的我找到了解决方案，这只是因为在离子范围的html中我有color=“primary”，所以我猜它覆盖了我的pin属性。我删除了这个属性，并在SCS中添加了--bar背景。