How to customize styles of Swiper Angular Component?-CodePudding

I'm trying to use https://swiperjs.com/angular component, and I don't understand how could it affect to my css. I put this one inside my component, like is below

Component:

//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 {
  }    
  

}

Template:

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

Styles:

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

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

What is the direction that I have to go next?

CodePudding user response：

You could try 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 {
  }    
  

}

If this doesnt work you could try CSS overload

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

then in your CSS

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

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