如何在 ng2-nouislider 中更改轨迹颜色

Question

我在 Angular 5 项目中使用 NG2-Nouislider。我有一个有两个手柄的滑块，我正在尝试更改连接手柄的阴影部分的颜色。我已尝试覆盖组件的 .scss 文件中的 css 类，但它没有任何效果。这是 scss 文件中使用的 css：

.noUi-connect {
     background: purple;
 }
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
     background: purple;
 }
 .noUi-target.noUi-horizontal .noUi-tooltip {
 background-color: purple;
 }

如何让它工作？

Answer 1

尝试覆盖 .scss 文件中的 CSS 添加 !important

.noUi-connect {
     background: purple !important;
 }
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
     background: purple !important;
 }
 .noUi-target.noUi-horizontal .noUi-tooltip {
 background-color: purple !important;
 }

和encapsulation到你的Component

@Component({
  selector: "app-x",
  templateUrl: "./x.component.html",
  styleUrls: ["./x.component.scss"],
  encapsulation: ViewEncapsulation.None
})

Answer 2

:host ::ng-deep .noUi-connect {
  background-color: blue;
}

如何在 ng2-nouislider 中更改轨迹颜色

How to change Track Color in ng2-nouislider

sass

nouislider

angular5