CSS 使用 swiper.js 库进行反应时发生冲突
CSS conflict in react using swiper.js library
我在 React 中使用 swiper.js 创建了两个滑块。两个滑块的 css 规则不同,必须针对库提供的相同 css 类。当我将两个组件集成到 React 中时,会发生 css 冲突。我该如何解决这个问题?
例如:第一个组件滑块css规则
.swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
第二个组件滑块 css 规则
.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 规则,我不希望这种情况发生
有什么办法可以解决这个问题吗?
您不需要对多个组件使用相同的 class。
这样做避免冲突。
.s1 用于第一个滑动滑块,.s2 用于第二个滑动滑块。
var s1 = new Swiper('.s1', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp1',
paginationClickable: true,
});
var s2 = new Swiper('.s2', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp2',
paginationClickable: true,
});
.s1 {
background: pink;
margin-bottom: 30px;
}
.s2 {
background: lime;
}
.swiper-slide {
border: 1px solid #115599;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<div class="swiper-container s1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container s2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp2"></div>
您可以为每个滑块添加一个容器 class,并使用该容器 class 作为您的 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>
</>
);
};
CSS
.container-1 .swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
.container-2 .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;
}
我在 React 中使用 swiper.js 创建了两个滑块。两个滑块的 css 规则不同,必须针对库提供的相同 css 类。当我将两个组件集成到 React 中时,会发生 css 冲突。我该如何解决这个问题?
例如:第一个组件滑块css规则
.swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
第二个组件滑块 css 规则
.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 规则,我不希望这种情况发生 有什么办法可以解决这个问题吗?
您不需要对多个组件使用相同的 class。
这样做避免冲突。
.s1 用于第一个滑动滑块,.s2 用于第二个滑动滑块。
var s1 = new Swiper('.s1', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp1',
paginationClickable: true,
});
var s2 = new Swiper('.s2', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp2',
paginationClickable: true,
});
.s1 {
background: pink;
margin-bottom: 30px;
}
.s2 {
background: lime;
}
.swiper-slide {
border: 1px solid #115599;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<div class="swiper-container s1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container s2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp2"></div>
您可以为每个滑块添加一个容器 class,并使用该容器 class 作为您的 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>
</>
);
};
CSS
.container-1 .swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
.container-2 .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;
}