Swiper работает локально, но не при развертывании ⇐ CSS

[Гость]

Я использую React, стилизованные компоненты и swiper, чтобы создать слайдер изображений. Он отлично работает локально, но, похоже, ломается при развертывании (AWS Amplify).

Инструменты разработки отображают .swiper-pagination и .swiper-slide за пределами .swiper-wrapper для развернутой версии.

экспортировать функцию по умолчанию DraggableImageSlider({ список изображений, описание, }: Реквизит) { возвращаться ( {imageList.map(({ id, imageUrl }) => ( ))} ); } const StyledDraggableImageSlider = styled(Swiper)` ширина: 100%; курсор: захватить; > .swiper-pagination-fraction { ширина: 59 пикселей; высота: 32 пикселей; отступ: 8 пикселей; позиция: абсолютная; внизу: 16 пикселей; слева: 318 пикселей; шрифт: ${({theme: {font} }) => font.displayDefault12}; цвет: ${({theme: {color} }) => color.neutral.textWeak}; радиус границы: 16 пикселей; фон: ${({theme: {color} }) => color.neutral.backgroundBlur}; фоновый фильтр: ${({theme: {backdropFilter} }) => backdropFilter.blur}; } `; const StyledSwiperSlide = styled(SwiperSlide)` ширина: 100%; высота: 100%; &::до { содержание: ""; ширина: 100%; высота: 100%; позиция: абсолютная; верх: 0; слева: 0; фон: линейный градиент( 180 градусов, rgba(0, 0, 0, 0,24) 0%, rgba(0, 0, 0, 0,138832) 9,16%, rgba(0, 0, 0, 0) 26,27% ); } `; const SlideImage = styled.img` ширина: 100%; высота: 100%; объектное соответствие: обложка; `; Решено
экспортировать функцию по умолчанию DraggableImageSlider({ список изображений, описание, }: Реквизит) { возвращаться ( {imageList.map(({ id, imageUrl }) => ( ))} ); } const StyledDraggableImageSlider = styled.div` ширина: 100%; курсор: захватить; .swiper { ширина: 100%; высота: 100%; > .swiper-pagination-fraction { ширина: 59 пикселей; высота: 32 пикселей; отступ: 8 пикселей; позиция: абсолютная; внизу: 16 пикселей; слева: 318 пикселей; шрифт: ${({theme: {font} }) => font.displayDefault12}; цвет: ${({theme: {color} }) => color.neutral.textWeak}; радиус границы: 16 пикселей; фон: ${({theme: {color} }) => color.neutral.backgroundBlur}; backdrop-filter: ${({ theme: { backdropFilter } }) => backdropFilter.blur}; } } .swiper-слайд { ширина: 100%; высота: 100%; &::до { содержание: ""; ширина: 100%; высота: 100%; позиция: абсолютная; верх: 0; слева: 0; фон: линейный градиент( 180 градусов, rgba(0, 0, 0, 0,24) 0%, rgba(0, 0, 0, 0,138832) 9,16%, rgba(0, 0, 0, 0) 26,27% ); } } `; const SlideImage = styled.img` ширина: 100%; высота: 100%; объектное соответствие: обложка; `;