如何修改Angular中ngx-owl-carousel-o的指示器圆点颜色与尺寸？

你遇到的问题本质是Angular的**视图封装（ViewEncapsulation）**导致组件内的CSS无法作用到ngx-owl-carousel-o生成的DOM元素上。默认情况下，Angular会给组件的样式添加专属属性，只作用于当前组件的模板，第三方组件生成的DOM不在这个范围内，所以直接写的.owl-theme样式不会生效。

下面是两种可行的解决方法：

方法一：使用样式穿透选择器（推荐） #

在组件的CSS文件中，用:host ::ng-deep组合来穿透样式隔离，同时限定样式只作用于当前组件：

/* 组件的.scss/.css文件 */
:host ::ng-deep .owl-theme .owl-dots {
  text-align: center;
}

:host ::ng-deep .owl-theme .owl-dots .owl-dot span {
  width: 12px; /* 自定义圆点宽度 */
  height: 12px; /* 自定义圆点高度 */
  margin: 5px 7px;
  background: #cccccc; /* 未激活状态颜色 */
  border-radius: 50%; /* 确保圆点是圆形（部分场景可能需要） */
}

:host ::ng-deep .owl-theme .owl-dots .owl-dot.active span,
:host ::ng-deep .owl-theme .owl-dots .owl-dot:hover span {
  background: #ff4081; /* 激活/hover状态颜色 */
}

• :host：确保样式只应用于当前组件的宿主元素，不会污染全局
• ::ng-deep：穿透Angular的视图封装，让样式作用到组件内部的第三方DOM元素

方法二：使用全局样式文件 #

将样式写到项目根目录的styles.scss（或styles.css）中，全局样式会作用于整个应用：

/* styles.scss */
.owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 5px 7px;
  background: #cccccc;
  border-radius: 50%;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #ff4081;
}

如果只想让样式作用于特定轮播组件，可以给owl-carousel-o添加自定义类：

<!-- 组件模板 -->
<owl-carousel-o [options]="customOptions" class="my-custom-carousel">
  <ng-container *ngFor="let slide of slides">
    <ng-template carouselSlide>
      <img [src]="slide.img" alt="轮播图片">
    </ng-template>
  </ng-container>
</owl-carousel-o>

然后修改全局样式：

/* styles.scss */
.my-custom-carousel .owl-theme .owl-dots .owl-dot span {
  /* 自定义样式 */
}

.my-custom-carousel .owl-theme .owl-dots .owl-dot.active span,
.my-custom-carousel .owl-theme .owl-dots .owl-dot:hover span {
  /* 激活状态样式 */
}

额外注意点 #

检查你的模板代码，你绑定的[options]="carouselOptions"和TS中的变量名customOptions不一致，需要修正为一致的名称：

// 组件TS文件
customOptions: OwlOptions = {
  loop: true,
  mouseDrag: true,
  touchDrag: true,
  pullDrag: true,
  dots: true,
  navSpeed: 700,
  navText: ['', ''],
  items: 1,
  nav: false
}

<!-- 组件模板 -->
<owl-carousel-o [options]="customOptions">
  <ng-container *ngFor="let slide of slides">
    <ng-template carouselSlide>
      <img [src]="slide.img" alt="轮播图">
    </ng-template>
  </ng-container>
</owl-carousel-o>

内容的提问来源于stack exchange，提问作者user22222422