Стиль к ng5-слайдеру в угловых не применяется

Question

Я не уверен точно, где этот вопрос принадлежит, но надеюсь, что любой может указать на направление.У меня есть проект Angular с ng5-слайдером.Я пишу следующую статью:

https://github.com/angular-slider/ng5-slider/blob/master/STYLING.md

Я пытаюсь изменить размер шрифта:

scss:

.custom-slider {
    .ng5-slider {
      .ng5-slider-selection {
        background: rgb(255, 255, 0) !important;
      }

      .ng5-slider-span {
        background-color: red !important;
        font-size: 6px;
      }

      .ng5-slider-pointer{
        background-color: red !important;
        font-size: 6px;
      }
    }
  }

  .ng5-slider .ng5-slider-pointer{
    height: 16px !important;
    background-color: red !important;
  }

  .ng5-slider-span{
    background-color: red !important;
  }

html:

 <div class="custom-slider">
     <ng5-slider [(value)]="value" [options]="options"></ng5-slider>
 </div>

Независимо от того, какие стили я добавляю, он не применяется.Я вижу, что в Chrome генерируется следующее:

<ng5-slider _ngcontent-c0="" class="ng5-slider" _nghost-c1="" ng-reflect-value="50"
    ng-reflect-options="[object Object]"><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-left-out-selection" ng5sliderleftoutselelem=""
        style="visibility: hidden;"><span _ngcontent-c1="" class="ng5-slider-span ng5-slider-bar"></span></span><span
        _ngcontent-c1="" class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-right-out-selection"
        ng5sliderrightoutselelem="" style="visibility: hidden;"><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderfullbarelem=""><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderselbarelem=""
        style="visibility: hidden; width: 80px; left: 0px;"><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar ng5-slider-selection"
            ng-reflect-ng-style="[object Object]"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-min" ng5sliderminhelem=""
        ng-reflect-ng-style="[object Object]" aria-valuenow="50" aria-valuetext="Male(50%), Female(50%)"
        aria-valuemin="0" aria-valuemax="100" role="slider" tabindex="0" style="left: 64px;"></span><span
        _ngcontent-c1="" class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-max" ng5slidermaxhelem=""
        ng-reflect-ng-style="[object Object]" style="display: none;"></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-floor" ng5sliderflrlabelem=""
        style="visibility: hidden; left: 0px;">Male(0%), Female(100%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-ceil" ng5sliderceillabelem=""
        style="visibility: hidden; left: -19px;">Male(100%), Female(0%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-model-value" ng5sliderminlabelem=""
        style="visibility: visible; left: -19px;">Male(50%), Female(50%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-model-high" ng5slidermaxlabelem=""
        style="visibility: hidden;"></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-combined" ng5slidercmblabelem=""
        style="visibility: hidden;"></span><span _ngcontent-c1="" class="ng5-slider-ticks" ng5slidertickselem=""
        hidden="">

Любые идеи, если это контрольная, угловая или стилевая часть.Все предложения по устранению неисправностей приветствуются.

Answer 1

добавьте styles в ваш файл styles.css в папке src

или добавить:

инкапсуляция: ViewEncapsulation.None:

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

к вашему компоненту для применения стилей в scss вашего компонента.

DEMO .