使用React+create-react-app时Swiperjs元素分页样式缺失问题

我使用React结合Swiper的Web Component版本开发，目前已成功加载coverflow效果的基础样式，但分页元素虽已插入DOM却完全无样式。仅当导入swiper/bundle时coverflow样式才生效，单独导入样式文件均无效。

组件代码 #

import React, { HTMLAttributes, useEffect, useRef } from 'react';
import 'swiper/bundle';
import { register, SwiperContainer } from 'swiper/element';
import { SwiperOptions } from 'swiper/types/swiper-options';

register();

// 声明JSX类型
declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements {
            'swiper-container': React.DetailedHTMLProps<
                SwiperOptions & HTMLAttributes<unknown>,
                HTMLElement
            >;
            'swiper-slide': React.DetailedHTMLProps<HTMLAttributes<unknown>, HTMLElement>;
        }
    }
}

export interface ICoverFlowProps {
}

export const CoverFlow: React.FC<ICoverFlowProps> = (props) => {
    const swiperRef = useRef<SwiperContainer>(null);

    useEffect(() => {
        if (!swiperRef.current) {
            return;
        }

        // 重复注册可移除
        register();

        const params: SwiperOptions = {
            slidesPerView: 3,
            speed: 500,
            effect: 'coverflow',
            pagination: true,
        };

        Object.assign(swiperRef.current, params);

        // 无需setTimeout，直接初始化
        setTimeout(() => swiperRef.current?.initialize());
    }, [swiperRef]);

    return (
        <swiper-container ref={swiperRef} init={false}>
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
        </swiper-container>
    );
};

无效的样式导入尝试 #

import 'swiper/css';
// 导入后无coverflow样式
import 'swiper/css/effect-coverflow';

// 以下导入均无效
import 'swiper/bundle';  // 仅这个能加载coverflow样式
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/element/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/element/css/pagination';

疑问 #

1. Swiper加载样式的正确方式是什么？
2. 如何正确应用组件的最小化样式？
3. 为何非bundle方式的样式导入无效？

解答 #

1. Swiper Web Component的正确样式加载方式 #

Swiper Web Component的样式和传统Swiper组件不共用，必须从swiper/element/css路径下导入对应样式：

• 基础样式：import 'swiper/element/css';
• 效果样式（如coverflow）：import 'swiper/element/css/effect-coverflow';
• 组件样式（如分页）：import 'swiper/element/css/pagination';

2. 应用最小化样式的步骤 #

只导入你实际需要的样式文件，避免冗余：

// 替换原有的import 'swiper/bundle'
import 'swiper/element/css';
import 'swiper/element/css/effect-coverflow';
import 'swiper/element/css/pagination';

同时可以优化组件的初始化逻辑，移除无需的register调用和setTimeout：

useEffect(() => {
  if (!swiperRef.current) return;

  const params: SwiperOptions = {
    slidesPerView: 3,
    speed: 500,
    effect: 'coverflow',
    pagination: true,
  };

  Object.assign(swiperRef.current, params);
  swiperRef.current.initialize();
}, []); // useRef的引用不会变化，无需放入依赖数组

3. 非bundle方式无效的原因 #

• 普通swiper/css系列样式是为传统Swiper（基于JS类的组件）设计的，其选择器和Web Component的DOM结构不匹配，因此导入后无法生效。
• swiper/bundle中包含了Web Component所需的所有样式（包括基础、效果、组件样式），所以能生效，但同时也会引入大量你不需要的冗余样式（比如其他未使用的滑动效果、组件样式）。

内容的提问来源于stack exchange，提问作者Sven van de Scheur