Next.js/React.js中复用StyledSwiperPagination组件无显示问题

核心问题 #

你直接在index.tsx中使用<StyledSwiperPagination />却看不到内容，本质原因有两个：

1. StyledSwiperPagination只是一个带样式的空div容器，本身不生成任何分页元素，分页按钮/圆点是Swiper组件内部根据配置渲染的。
2. 你没有传递它要求的length属性（虽然样式代码里没用到这个值，但会触发TypeScript类型错误）。

解决办法 #

方案一：复用完整的轮播组件（推荐） #

如果你需要的是带样式的分页轮播，直接使用已封装好的SwiperImages组件即可，它已经包含了Swiper实例和对应的样式：

// index.tsx
import { SwiperImages } from "~/components/elements/SwiperImages";

// ... 其他逻辑代码
return (
  <Flex>
    {/* 传入你的图片数组数据 */}
    <SwiperImages images={你的图片数组} />
  </Flex>
);

方案二：单独复用分页样式（自定义Swiper时用） #

如果想在自己的Swiper组件上复用这个分页样式，不要直接用StyledSwiperPagination，而是提取样式片段：

1. 在SwiperImages.tsx中单独导出分页样式组件：

// SwiperImages.tsx
export const SwiperPaginationWrapper = styled.div`
  .swiper-pagination {
    padding: 0px 9px !important;

    .swiper-pagination-bullet {
      margin: 0px 10px !important;
      padding: 0px !important;
      height: 20px !important;
      width: 20px !important;
      border-radius: 50% !important; 
      border: 2px solid #fff !important; 
      background-color: #fff !important;
      opacity: 0.5 !important;
    }
  
    .swiper-pagination-bullet-active {
      border: 2px solid #000 !important; 
      background-color: #000 !important; 
      opacity: 1 !important;
    }
  }
`;

2. 在index.tsx中用这个样式组件包裹你自己的Swiper：

// index.tsx
import { SwiperPaginationWrapper } from "~/components/elements/SwiperImages";
import { Swiper, Pagination } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';

// ... 其他逻辑代码
return (
  <Flex>
    <SwiperPaginationWrapper>
      <Swiper
        modules={[Pagination]}
        pagination={{ clickable: true, type: "bullets" }}
        {/* 你的Swiper配置和slide内容 */}
      >
        {/* 这里放你的slide元素 */}
      </Swiper>
    </SwiperPaginationWrapper>
  </Flex>
);

补充说明 #

StyledSwiperPagination的作用是作为Swiper的容器，通过CSS后代选择器给内部的Swiper分页元素（.swiper-pagination-bullet等）应用样式，它自身没有任何可视化内容，必须搭配完整的Swiper实例才能生效。

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