时间戳

首页 > 解决方案 > Angular ::ng-deep {} 在 *.component.css ng5-slider 中不起作用

html - Angular ::ng-deep {} 在 *.component.css ng5-slider 中不起作用

问题描述

如您所见，我下面的代码是用 Angular 编写的，版本：9.1.2。我想自定义 ng-5 滑块，但它不起作用。一切都应该正常工作，但是当我在我的 CSS 中使用标签 ::ng-deep {} 时，它给了我错误“不要使用空的 rulesetscss(emptyRules)”。不知道为什么会这样。它应该可以工作我想让点变小并使其变黑（我知道这不是css中的内容，但这是我从网上得到的一个例子，但它不起作用。）

.quartos {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  padding: 0;
}

#procuraQ {
  grid-column-start: 2;
  grid-column-end: span 1;
}

#serviços {
  float: right;
}

 ::ng-deep {
  .custom-slider .ng5-slider .ng5-slider-bar {
    background: #ffe4d1;
    height: 2px;
  }
  .custom-slider .ng5-slider .ng5-slider-selection {
    background: orange;
  }
  .custom-slider .ng5-slider .ng5-slider-pointer {
    width: 8px;
    height: 16px;
    top: auto;
    /* to remove the default positioning */
    bottom: 0;
    background-color: #333;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .custom-slider .ng5-slider .ng5-slider-pointer:after {
    display: none;
  }
  .custom-slider .ng5-slider .ng5-slider-bubble {
    bottom: 14px;
  }
  .custom-slider .ng5-slider .ng5-slider-limit {
    font-weight: bold;
    color: orange;
  }
  .custom-slider .ng5-slider .ng5-slider-tick {
    width: 1px;
    height: 10px;
    margin-left: 4px;
    border-radius: 0;
    background: #ffe4d1;
    top: -1px;
  }
  .custom-slider .ng5-slider .ng5-slider-tick.ng5-slider-selected {
    background: orange;
  }
}
<div class="quartos">
  <div id="procuraQ">
    <div id="barraProcura">
      <div id="procura">
        <div class="custom-slider">
          <ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ng5-slider>
        </div>
        <button routerLink="/douroVinhas/quartos/servicos">Serviços</button>
      </div>
      <div id="quartosVisao"></div>
    </div>
  </div>

标签： htmlcssangular

解决方案

试试这个看看它是否有效：

.ng5-slider::ng-deep .ng5-slider-bar {
  background: #ffe4d1;
  height: 2px;
}
.ng5-slider::ng-deep .ng5-slider-selection {
  background: orange;
}
.ng5-slider::ng-deep .ng5-slider-pointer {
  width: 8px;
  height: 16px;
  top: auto;
  /* to remove the default positioning */
  bottom: 0;
  background-color: #333;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.ng5-slider::ng-deep .ng5-slider-pointer:after {
  display: none;
}
.ng5-slider::ng-deep .ng5-slider-bubble {
  bottom: 14px;
}
.ng5-slider::ng-deep .ng5-slider-limit {
  font-weight: bold;
  color: orange;
}
.ng5-slider::ng-deep .ng5-slider-tick {
  width: 1px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0;
  background: #ffe4d1;
  top: -1px;
}
.ng5-slider::ng-deep .ng5-slider-tick.ng5-slider-selected {
  background: orange;
}

我会使用 SASS ( scss) 而不是 CSS，但这只是我的个人意见。

推荐阅读