在 ionic 4 中编辑 shadow DOM - ion-slides

Question

我有一个 ionic 4 slides 组件，我想在其中更改分页项目符号的样式

<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>

我可以通过以下代码更改项目符号的颜色（代码 #1）bt 我想添加更多自定义项，例如边框颜色、填充等，这是目前我无法做到的（代码#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 是deprecated。看看here

: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>';
    }
  }
};