为什么我的“Swiper”组件在 typescript 反应项目中不起作用？

Question

所以我想使用 Swiper 库进行反应。 我有多个电影元素，我想浏览它们。 我这样导入它：

import Swiper from 'react-id-swiper';

我这样使用它：

<div className="carousel-container">
        <Swiper>
                  {movies.map(movie =>
                      <MovieItem movie={movie} key={movie.title}/>
                    )}
        </Swiper>
    </div>

所以它应该用电影项目制作一个水平的 slider，但在页面上它看起来像这样：

所以就像我只是将所有电影放在一个公共 div 中一样，虽然当我在浏览器中打开代码时，所有电影都在带有所有类的 swiper div 中，所以我不确定为什么它不起作用它应该的方式。 也许问题是因为我使用.tsx文件？

Answer 1

问题是缺少 css/样式。

react-id-swiper的文档很旧。 根据它使用的主模块 ( swiperjs ) 上的文档，您需要像这样添加样式/css：

import "swiper/css";

我已经创建了一个沙箱供您查看它在这里工作