Question

我不确定这个问题的确切位置，但希望任何人都可以指出一个方向。我有一个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="">

任何想法，如果这是控件，角度或样式部分。欢迎提出解决问题的所有建议。

Answer 1

将样式添加到src文件夹的styles.css中

或添加：

封装：ViewEncapsulation.None：

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

向组件添加样式，以在组件的scs中应用样式。

DEMO。

Answer 2

在CSS文件中尝试此

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

希望这会起作用

Answer 3

因此，我尝试了许多不同的方法，最后发现，首先需要遵循的输入路径（例如此处使用父级）是ng5-slider，然后在控制台中查看其子元素并从中选择最后一个类，如果将其添加到global styles.css中，则无需添加:: ng-deep，则可以省略:: ng-deep括号。

::ng-deep {
    .ng5-slider {
        .ng5-slider-selection {
            background: $brand-blue !important;
        }
        .ng5-slider-floor,
        .ng5-slider-model-value,
        .ng5-slider-model-value,
        .ng5-slider-model-high,
        .ng5-slider-ceil,
        .ng5-slider-combined {
            display: none !important;
        }
    }
}

未应用ng5-slider的角度样式

3 个答案: