Javascript 使用swiper.js库时react中的CSS冲突

我在react中使用swiper.js创建了两个滑块。两个滑块的css规则不同，必须针对库提供的相同css类。当我在react中集成这两个组件时，css冲突就会发生。我如何解决这个问题

例如：第一个组件滑块css规则

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

.swiper-container {
  max-width: 500px;
  border-radius: 15px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 16px;
  margin-left: 0;
  margin-right: 0;
}

第二个组件滑块css规则

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

.swiper-container {
  max-width: 500px;
  border-radius: 15px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 16px;
  margin-left: 0;
  margin-right: 0;
}

第二个组件css规则将覆盖第一个组件css规则，我不希望发生这种情况

---

有没有办法解决这个问题？

您不需要对多个组件使用同一个类

执行此操作以避免冲突

.s1用于第一个滑动滑块，而.s2用于第二个滑动滑块

var s1=新开关（'.s1'{
幻灯片视图：4，
间隔时间：10，
分页：'.sp1'，
paginationClickable:true，
});
变量s2=新的开关（'.s2'{
幻灯片视图：4，
间隔时间：10，
分页：'.sp2'，
paginationClickable:true，
});
.s1{
背景：粉红色；
边缘底部：30px；
}
.s2{
背景：石灰；
}
.滑梯{
边框：1px实心#115599；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10
幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10
您可以为每个滑块添加一个容器类，并使用该容器类作为css规则的前缀

例如：

// import Swiper core and required components
import SwiperCore, {A11y, Navigation, Pagination, Scrollbar} from 'swiper';

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

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

export default () => {
    return (
        <>
            <div className="container-1">
                <Swiper
                    spaceBetween={50}
                    slidesPerView={3}
                    navigation
                    pagination={{clickable: true}}
                    scrollbar={{draggable: true}}
                    onSwiper={(swiper) => console.log(swiper)}
                    onSlideChange={() => console.log('slide change')}
                >
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                    ...
                </Swiper>
            </div>
            <div className="container-2">
                <Swiper
                    spaceBetween={50}
                    slidesPerView={3}
                    navigation
                    pagination={{clickable: true}}
                    scrollbar={{draggable: true}}
                    onSwiper={(swiper) => console.log(swiper)}
                    onSlideChange={() => console.log('slide change')}
                >
                    <SwiperSlide>Slide 1</SwiperSlide>
                    <SwiperSlide>Slide 2</SwiperSlide>
                    <SwiperSlide>Slide 3</SwiperSlide>
                    <SwiperSlide>Slide 4</SwiperSlide>
                    ...
                </Swiper>
            </div>
        
        </>
    );
};

我正在使用react及其组件，因此我无法直接添加或访问类。如何使用按钮实现相同的效果。组件的按钮和CSS都不一样，这是什么意思？按钮在滑块内吗？在任何一种情况下，即使按钮不在滑块内，您也可以使用具有特定类的div容器包装按钮，并执行与左侧和侧面的swiper容器相同的操作箭头键具有不同的对齐方式。如何将它们作为目标？尝试在sandbox上检查以下代码