在离子4中编辑阴影DOM - 离子幻灯片

Question

我有一个ionic 4幻灯片组件，我想改变分页子弹的样式。

<ion-slides class="lyt-carousel" pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>

我可以用下面的代码改变子弹的颜色(CODE #1)，但我想增加更多的自定义功能，如边框颜色，padding等，目前我还不能做到(CODE #2)

代码#1

.lyt-carousel {
  --bullet-background-active: red;
  --bullet-background: white;
  }

代码#2

ion-slides {
  .swiper-pagination-bullets {

    margin-top: 15px;
    .swiper-pagination-bullet {
      border: 5px solid blue;
    }
  }
}

Answer 1

虽然 ::ng-deep 是 弃用. 你看一下 此处

:host ::ng-deep .swiper-pagination-bullets {

  margin-top: 15px;

  .swiper-pagination-bullet {
    border: 5px solid blue;
  }
}

我推荐一个更好的方式来实现你自己的风格，从选项中设置它。这里是 API 备查

slideOpts = {
  initialSlide: 0,
  speed: 400,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    renderBullet: (index, className) => {
      return '<span style="border: 5px solid blue;"class="' + className + '"></span>';
    }
  }
};