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

• 1 确认Swiper基础样式已正确引入
  需要先引入Swiper的核心样式和对应模块的样式，否则导航按钮的基础DOM和样式都不会生成。可以在全局styles.scss中添加以下导入：

// 全局styles.scss
@import "swiper/css";
@import "swiper/css/navigation";
@import "swiper/css/pagination";
@import "swiper/css/scrollbar";

也可以在angular.json的build->options->styles数组中添加对应的css文件路径。

• 2 排查Angular样式封装拦截问题
  Angular默认开启ViewEncapsulation，会给当前组件的样式添加唯一属性前缀，只能命中当前组件模板中直接写的DOM，而.swiper-button-prev是Swiper组件内部动态渲染的DOM，不会被当前组件的样式命中。
  解决方式二选一：
  第一种，使用::ng-deep穿透样式封装（推荐，不会影响全局样式），修改你的组件scss为：

//my.component.scss
:host ::ng-deep .swiper{  
  background: #f5f5f5;
  .swiper-button-prev {  
    width: 50px;
    height: 50px;
    background: #fe3331;
  }
}

第二种，关闭当前组件的样式封装，在@Component装饰器中添加配置：

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; // 先导入ViewEncapsulation

@Component({
  selector: 'app-swiper-carusel',
  templateUrl: './swiper-carusel.component.html',
  styleUrls: ['./swiper-carusel.component.scss'],
  encapsulation: ViewEncapsulation.None // 新增配置
})

• 3 确认Swiper配置中已开启对应模块功能
  检查你的Swiper配置config中是否明确开启了navigation，否则不会生成导航按钮DOM：

config: SwiperOptions = {
  modules: [Navigation, Pagination, Scrollbar],
  navigation: true, // 必须开启才会渲染.swiper-button-prev元素
  // 其余原有配置
};

• 4 排查样式优先级冲突
  如果以上步骤都完成还是不生效，可以打开浏览器开发者工具，选中.swiper-button-prev元素，查看你的自定义样式是否被覆盖，如果是被更高优先级的样式覆盖，可以调高自定义样式的权重，或者临时加!important测试是否是优先级问题。

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