Swiper本地正常运行但部署到AWS Amplify后失效问题解决

我用React、Styled Components和Swiper开发图片轮播组件，本地运行完全正常，但部署到AWS Amplify后出现异常——开发者工具显示部署版本里的.swiper-pagination和.swiper-slide元素跑到了.swiper-wrapper外面。

初始实现代码 #

export default function DraggableImageSlider({
  imageList,
  description,
}: Props) {
  return (
    <StyledDraggableImageSlider
      modules={[Pagination]}
      pagination={{ type: "fraction" }}>
      {imageList.map(({ id, imageUrl }) => (
        <StyledSwiperSlide key={id}>
          <SlideImage src={imageUrl} alt={description} />
        </StyledSwiperSlide>
      ))}
    </StyledDraggableImageSlider>
  );
}

const StyledDraggableImageSlider = styled(Swiper)`
  width: 100%;
  cursor: grab;

  > .swiper-pagination-fraction {
    width: 59px;
    height: 32px;
    padding: 8px;
    position: absolute;
    bottom: 16px;
    left: 318px;
    font: ${({ theme: { font } }) => font.displayDefault12};
    color: ${({ theme: { color } }) => color.neutral.textWeak};
    border-radius: 16px;
    background: ${({ theme: { color } }) => color.neutral.backgroundBlur};
    backdrop-filter: ${({ theme: { backdropFilter } }) => backdropFilter.blur};
  }
`;

const StyledSwiperSlide = styled(SwiperSlide)`
  width: 100%;
  height: 100%;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0.138832) 9.16%,
      rgba(0, 0, 0, 0) 26.27%
    );
  }
`;

const SlideImage = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

问题原因 #

直接对Swiper和SwiperSlide核心组件进行Styled Components包装，会干扰Swiper内部动态生成DOM结构的逻辑。本地开发环境的构建模式可能掩盖了这个问题，但生产环境（AWS Amplify部署的是生产构建）下，这种组件层级的干扰会导致.swiper-slide和分页元素被错误地放置在.swiper-wrapper外部。

解决后的代码 #

export default function DraggableImageSlider({
  imageList,
  description,
}: Props) {
  return (
    <StyledDraggableImageSlider>
      <Swiper modules={[Pagination]} pagination={{ type: "fraction" }}>
        {imageList.map(({ id, imageUrl }) => (
          <SwiperSlide key={id}>
            <SlideImage src={imageUrl} alt={description} />
          </SwiperSlide>
        ))}
      </Swiper>
    </StyledDraggableImageSlider>
  );
}

const StyledDraggableImageSlider = styled.div`
  width: 100%;
  cursor: grab;

  .swiper {
    width: 100%;
    height: 100%;

    > .swiper-pagination-fraction {
      width: 59px;
      height: 32px;
      padding: 8px;
      position: absolute;
      bottom: 16px;
      left: 318px;
      font: ${({ theme: { font } }) => font.displayDefault12};
      color: ${({ theme: { color } }) => color.neutral.textWeak};
      border-radius: 16px;
      background: ${({ theme: { color } }) => color.neutral.backgroundBlur};
      backdrop-filter: ${({ theme: { backdropFilter } }) =>
        backdropFilter.blur};
    }
  }

  .swiper-slide {
    width: 100%;
    height: 100%;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.24) 0%,
        rgba(0, 0, 0, 0.138832) 9.16%,
        rgba(0, 0, 0, 0) 26.27%
      );
    }
  }
`;

const SlideImage = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

解决思路 #

1. 放弃直接对Swiper和SwiperSlide组件进行styled包装，改用一个普通的styled div作为外层容器
2. 在容器样式中，通过Swiper自带的类名（.swiper、.swiper-slide、.swiper-pagination-fraction）来编写样式规则
3. 保持Swiper和SwiperSlide组件的原生使用方式，确保其内部DOM结构生成逻辑不受干扰

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