AngularCLI 7.1.3如何更改owl-carousel点的颜色？
AngularCLI 7.1.3如何更改owl-carousel点的颜色？
提问于 2019-01-06 04:33:18
我想将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表示悬停。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-06 05:41:42
更改owl主题-自定义-> owl主题应该在点上应用颜色，并添加ng- solution.Temporary作为临时深度解决方案，因为已被弃用。
::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*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54056008
复制相关文章
相似问题
腾讯云开发者
