Как изменить цвет дорожки в ng2-nouislider

Question

Я использую NG2-Nouislider в проекте Angular 5. У меня есть слайдер с двумя ручками, и я пытаюсь изменить цвет затененной части, которая соединяет ручки. Я попытался переопределить классы CSS в файле.scss для компонента, но это не имеет никакого эффекта. Это был CSS, используемый в файле scss:

.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;
}