为什么我的 "Swiper" 组件在打字稿反应项目中不起作用？

Question

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

import Swiper from 'react-id-swiper';

我就是这样使用的：

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

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

所以就像我只是将所有电影放在一个公共 div 中一样，尽管当我在浏览器中打开代码时，所有电影都在 swiper div 中，所有类，所以我不确定为什么它不能按应有的方式工作。也许问题是因为我使用 .tsx file?

Answer 1

问题是缺少 css/styling。

关于 react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) 的文档，您需要像这样添加 styling/css：

import "swiper/css";

我已经创建了一个沙箱供您查看它的工作情况here

为什么我的 "Swiper" 组件在打字稿反应项目中不起作用？

Why my "Swiper" component doesn't work in a typescript react project?

reactjs

typescript

swiper