如何在ng2-nouislider中更改曲目颜色

Posted 2021-05-04

我在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;
 }

我如何让它工作？

答案

尝试在添加CSS的.scss文件中覆盖!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
})