如何自定义 Swiper Angular 组件的样式？

Question

我正在尝试使用 https://swiperjs.com/angular 组件，但我不明白它对我的 css 有何影响。我将这个放在我的组件中，如下所示

分量：

//my.component.ts
import { Component, OnInit } from '@angular/core';
import SwiperCore, {Navigation, Pagination, Scrollbar, SwiperOptions} from 'swiper';

SwiperCore.use([Navigation, Pagination, Scrollbar]);

@Component({
  selector: 'app-swiper-carusel',
  templateUrl: './swiper-carusel.component.html',
  styleUrls: ['./swiper-carusel.component.scss']
})
export class SwiperCaruselComponent implements OnInit {

  constructor() { }

  config: SwiperOptions = {
    modules: [Navigation, Pagination, Scrollbar],
    ...
  };

  ngOnInit(): void {
  }    
  

}

模板：

//my.component.html
<swiper
  [config]="config"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()"
>
  <ng-template swiperSlide>
    <img src="https://via.placeholder.com/336" alt="">
  </ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>      
</swiper>

样式：

//my.component.scss
.swiper{  
  background: #f5f5f5; //It works

  .swiper-button-prev { //It doesn't work   
    width: 50px;
    height: 50px;
    background: #fe3331;
  }
}

接下来我要走的方向是什么？

Answer 1

你可以试试ViewEncapsulation.None

@Component({
  selector: 'app-swiper-carusel',
  templateUrl: './swiper-carusel.component.html',
  styleUrls: ['./swiper-carusel.component.scss'],
  encapsulation: ViewEncapsulation.None // <======================== HERE
})
export class SwiperCaruselComponent implements OnInit {

  constructor() { }

  config: SwiperOptions = {
    modules: [Navigation, Pagination, Scrollbar],
    ...
  };

  ngOnInit(): void {
  }    
  

}

如果这不起作用，您可以尝试 CSS 重载

<div class="some-class">
  <swiper
    [config]="config"
    (swiper)="onSwiper($event)"
    (slideChange)="onSlideChange()"
  >
    <ng-template swiperSlide>
      <img src="https://via.placeholder.com/336" alt="">
    </ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>      
  </swiper>
<div>

然后在你的 CSS

.some-class {
  .swiper{  
    background: #f5f5f5; //It works

    .swiper-button-prev { //It doesn't work   
      width: 50px;
      height: 50px;
      background: #fe3331;
    }
  }
}

如何自定义 Swiper Angular 组件的样式？

How to customize styles of Swiper Angular Component?

angular

swiper