在Next.js中修改Swiper8分页器样式

最近遇到一个需求：要把swiper的pagination分页器调整到右下角，同时修改分页器颜色。
被这个很简单的需求困了好久，所以本文就讲一下如何实现这个需求，给后面遇到同样问题的朋友排排坑。

运行环境

"next":"12.1.6","react":"18.2.0","react-dom":"18.2.0","swiper":"^8.2.4"

Swiper8基本使用

总所周知，Next.js是基于React的SSR框架。
在官网可以看到Swiper团队针对React专门封装了对应的组件。
英文官方文档：https://swiperjs.com/react
（建议直接看英文文档，中文文档更新不及时，甚至现在还没有出Swiper8的）

1. 安装
   yarn add swiper
   目前我安装的最新版本为"swiper": “^8.2.4”
2. 基本使用
   封装轮播图组件

// components/Carousel/index.tsximport{ Pagination}from"swiper";import{ Swiper, SwiperSlide}from"swiper/react";// 引入基础样式import"swiper/css";// 进入分页器相关样式import"swiper/css/pagination";constCarousel=()=>{return(<Swiper// 使用分页器模块
      modules={[Pagination]}
      spaceBetween={0}
      slidesPerView={1}
      pagination={{ clickable:true}}
      onSlideChange={()=>console.log("slide change")}
      onSwiper={(swiper)=>console.log(swiper)}><SwiperSlide style={{ background:"lightblue", height:"200px"}}>
        Slide1</SwiperSlide><SwiperSlide style={{ background:"lightblue", height:"200px"}}>
        Slide2</SwiperSlide><SwiperSlide style={{ background:"lightblue", height:"200px"}}>
        Slide3</SwiperSlide><SwiperSlide style={{ background:"lightblue", height:"200px"}}>
        Slide4</SwiperSlide></Swiper>);};exportdefault Carousel;

在页面中引入组件

import Carouselfrom"../components/Carousel";constHome=()=>{return(<><Carousel></Carousel></>);};exportdefault Home;

3. 基本效果展示
   输入yarn dev启动项目后在http://localhost:3000 访问到如下页面
   

修改样式

因为Next.js不支持直接导入你自己写的外部样式(只有在globals.css中才能导入)，而需要使用module模块化的样式才能导入。模块化的样式隔离了作用域，导致我编写的样式无法穿透到swiper组件。

如果在globals.css中直接导入样式是可以修改的，但会在不需要此样式的页面中会出现不必要的加载。

最后在官方文档中发现可以在js中通过styled-jsx直接编写css：CSS-in-JS
使用global关键字可设置样式的作用域

全局样式

exportdefault()=>(<div>// 整个style标签里的样式作用域都变为全局<style jsx global>{`
      body {
        background: red;
      }`}</style></div>)

某一个样式全局化

使用:global()包裹选择器

import Selectfrom'react-select'exportdefault()=>(<div><Select optionClassName="react-select"/><style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */

      div :global(.react-select) {
        color: red;
      }`}</style></div>)

修改分页器样式

import{ Pagination}from"swiper";import{ Swiper, SwiperSlide}from"swiper/react";// 引入基础样式import"swiper/css";// 进入分页器相关样式import"swiper/css/pagination";constCarousel=()=>{return(<><Swiper// 使用分页器模块
        modules={[Pagination]}
        spaceBetween={0}
        slidesPerView={1}
        pagination={{clickable:true}}
        onSlideChange={()=> console.log("slide change")}
        onSwiper={(swiper)=> console.log(swiper)}><SwiperSlide style={{background:"lightblue",height:"200px"}}>
          Slide1</SwiperSlide><SwiperSlide style={{background:"lightblue",height:"200px"}}>
          Slide2</SwiperSlide><SwiperSlide style={{background:"lightblue",height:"200px"}}>
          Slide3</SwiperSlide><SwiperSlide style={{background:"lightblue",height:"200px"}}>
          Slide4</SwiperSlide></Swiper><style jsx global>{`
          .swiper-pagination {
            text-align: right;
            padding-right: 10px;
          }
          .swiper-pagination-bullet {
            border-radius: 0;
          }
          .swiper-pagination-bullet-active {
            background: green;
          }`}</style></>);};exportdefault Carousel;

修改后的样式如下：