html - 未应用 ng5-slider 中的样式

我有一个带有 ng5-slider 的 Angular 元素。我正在关注以下文章:

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="">

如果这是控制， Angular 或样式部分，有什么想法吗？

最佳答案

在 css 文件中试试这个

::ng-deep {
    .custom-slider .ng5-slider .ng5-slider-selection {
        background: #DF495B;
      }
}

希望这会奏效

关于html - 未应用 ng5-slider 中的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55076141/