导入时未应用 Swiper 7 CSS

Question

我按照文档说明在 React 应用程序上安装了 Swiper：

import "swiper/css";

然后：

  <Swiper
    spaceBetween={50}
    slidesPerView={3}
    onSlideChange={() => console.log("slide change")}
    onSwiper={(swiper) => console.log(swiper)}
  >
    <SwiperSlide>1</SwiperSlide>
    <SwiperSlide>2</SwiperSlide>
    <SwiperSlide>3</SwiperSlide>
    <SwiperSlide>4</SwiperSlide>
  </Swiper>

但是样式没有应用于 Swiper，并且不起作用。

Answer 1

@import 'swiper/swiper.scss';

//optional
@import 'swiper/components/navigation/navigation.scss';
@import 'swiper/components/pagination/pagination.scss';
@import 'swiper/components/scrollbar/scrollbar.scss';

Answer 2

我将这些导入添加到我的组件中，这解决了我的问题。

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/scss/navigation';

类似于@Oguz3的答案，只是在js/ts中，而不是在scss中。