如何在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

尝试覆盖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
})

Answer 2

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