如何使用styled-components自定义Swiper轮播组件的导航按钮样式

实现方案 #

有两种常用方式可以实现需求，你可以根据场景选择：

方案1：直接覆盖Swiper默认导航按钮类名（改造成本最低） #

Swiper的默认导航按钮有固定类名.swiper-button-prev和.swiper-button-next，你直接在已封装的CarouselBox的styled样式里覆盖这两个类的样式即可，不需要修改现有JSX结构。
改造后的样式代码：

const CarouselBox = styled(Swiper)`
  width: 100%;
  height: 100%;
  display: inline-grid;

  /* 覆盖默认前后按钮的通用样式 */
  .swiper-button-prev, .swiper-button-next {
    bottom: 10px;
    top: auto; // 清除Swiper默认的top定位，否则bottom属性不生效
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(50px);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    z-index: 2;
    outline: none;
    border: none;

    /* 清除Swiper默认的箭头伪元素，也可以自行修改伪元素的样式保留箭头 */
    &::after {
      display: none;
    }
  }

  /* 单独调整左右按钮的水平位置 */
  .swiper-button-prev {
    left: 20px;
  }
  .swiper-button-next {
    right: 20px;
  }
`;

该方案不需要修改现有JSX逻辑，保留navigation={true}配置即可生效。

方案2：完全自定义按钮绑定Swiper实例（自由度最高） #

如果你不想依赖Swiper的默认按钮，完全使用自定义的Btn组件，可以通过Swiper的onSwiper钩子获取实例，手动给自定义按钮绑定切换事件：

JSX部分改造：

import { useState } from 'react';

// 声明变量存储swiper实例
const [swiper, setSwiper] = useState(null);

return (
  <SC.CarouselBox 
    loop={true} 
    cssMode={true} 
    navigation={false} // 关闭Swiper默认导航
    mousewheel={true} 
    keyboard={true}
    slidesPerView={1} 
    pagination={{"clickable": true}} 
    className="mySwiper"
    onSwiper={setSwiper} // 获取swiper实例
  >
    <SC.CarouselBlur></SC.CarouselBlur>
    {/* 插入自定义按钮，绑定切换事件 */}
    <SC.Btn onClick={() => swiper?.slidePrev()} style={{left: '20px'}}>←</SC.Btn>
    <SC.Btn onClick={() => swiper?.slideNext()} style={{right: '20px'}}>→</SC.Btn>
    {sliderItems.map((item, i) =>  (
      <SwiperSlide>
       <img src={item.img}/>
      </SwiperSlide>
    ))}
  </SC.CarouselBox>
)

该方案可以完全自定义按钮的位置、内容、交互逻辑，不受Swiper默认规则限制。

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