导入时不应用 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';