css - Angular CLI 7.1.3 如何改变 Owl Carousel 点的颜色？

Question

我想将 Owl Carousel 的圆点颜色更改为#FCAC45。

我尝试直接在 node_modules/owl.carousel/dist/assets.owl.theme.default.css 中更改主题的颜色并且它有效，但是我被警告不要更改 node_modules 中的代码，这意味着我需要另一种解决方案。

我也尝试了这个话题的每一个答案，都失败了: Change color of the dots

我还尝试直接应用自定义类:

 <owl-carousel class"custom" (...)> </owl-carousel>

我的代码的当前状态是:

HTML

<section id="presidents">
  <div class="slider" [ngStyle]="{'width' : width}">
  <h4>Title</h4>

    <owl-carousel
    [options]="sliderOPT"
    [items]="images"
    [carouselClasses]="['owl-theme']">
      <div class="item" *ngFor="let image of images;let i = index">
        <img class="image-style" [src]="image"/>
      </div>
    </owl-carousel>
  </div>
</section>

CSS

.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #FCAC45!important;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px; 
}
.owl-theme-custom.owl-dots .owl-dot.active span, .owl-theme-custom .owl-dots .owl-dot:hover span {
 background: #FCAC45!important;
 }

TS

images = [/*a bunch of image urls*/];
width = '60%';

public sliderOPT: any = {
dots: true,
autoplay: true,
autoplayTimeout: 4000,
autoplaySpeed: 1000,
rewind: true,
autoplayHoverPause: true,
items: 3,
responsiveClass: true,
responsive: {
    0: {
        items: 1,
        dots: false
    },
    576: {
        items: 2
    },
    768: {
        items: 3
    }
}

我希望圆点的颜色变为#FCAC45，但正常情况下它保持#D6D6D6，悬停时保持#869791。

我正在使用的 npm 包:https://www.npmjs.com/package/ngx-owl-carousel .

Answer 1

更改 owl-theme-custom -> owl-theme 应该在点上应用颜色，并添加 ng-deep 作为临时解决方案。临时解决方案因为已弃用。

::ng-deep .owl-theme .owl-dots .owl-dot span {
   background: #D6D6D6!important; /* dots color*/
 }

::ng-deep .owl-theme .owl-dots .owl-dot.active span,
 .owl-theme .owl-dots .owl-dot:hover span {
   background: #FCAC45!important; /*active and on hover color*/
 }