Модуль сетки Swiper не работает в приложении Next.js

В течение двух дней я действительно изо всех сил пытался запустить функциональную опцию Swiper Grid с моим приложением Next.js. Я перепробовал много решений stackoverflow и пробовал разные способы заставить это поведение сетки работать с моим приложением, увы! все попытки не увенчались успехом, и ни одна из них не добавила сетку.

Наконец, я реализую примеры кода из самого Swiper. Хотя демо-код работает на их платформе, но не в моем приложении. Я ничего не сделал, кроме как скопировал код и создал новую страницу для Swiper Grid в своем приложении Next.js.

Я не знаю, почему он ведет себя не так, как должен. Справочные сайты и коды приведены ниже:

Ссылка на рабочую демонстрацию: https://codesandbox.io/s/20p7zs?file=/src/App.jsx:0-1049

import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
// import required modules
import { Grid, Pagination } from "swiper";
export default function App() {
return (
<>
<Swiper
slidesPerView={3}
grid={{
rows: 2,
}}
spaceBetween={30}
pagination={{
clickable: true,
}}
modules={[Grid, Pagination]}
className="mySwiper"
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
<SwiperSlide>Slide 5</SwiperSlide>
<SwiperSlide>Slide 6</SwiperSlide>
<SwiperSlide>Slide 7</SwiperSlide>
<SwiperSlide>Slide 8</SwiperSlide>
<SwiperSlide>Slide 9</SwiperSlide>
</Swiper>
</>
);
}


Мой проект:

Ожидаемый результат:

Мой вывод:

Было бы неплохо получить совет эксперта по этой конкретной проблеме Grid.

Решение проблемы

Если вам нужна только сетка (и навигация/разбивка на страницы), у меня есть решение:

ОБНОВЛЕНИЕ: я обнаружил, что такое поведение происходит, когда CSS не импортирован должным образом, попробуйте удалить CSS, и это произойдет. Я все еще пытаюсь найти правильный способ импортировать его.

Важно: не импортируйте swiper/css/grid, чтобы это работало.

Вставьте свой css:

.swiper-grid >.swiper-wrapper {
flex-wrap: wrap!important;
align-items: baseline;
}


или

.swiper-grid >.swiper-wrapper {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}


До:

После:

Но тогда другие модули swiper могут не работать. Я использую реакцию ^ 18.0.0, swiper ^ 8.1.4 и машинописный текст ^ 4.6.3, "lib": ["DOM", "DOM.Iterable", "ESNext", "ES6", "ES7", " ЕС5"].

centeredSlides={true} не работает

lazy={true} не работает

freeMode={true} работает