為什么我的“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";

我已經創建了一個沙箱供您查看它在這里工作