使用 swiper.js 库做出反应的 CSS 冲突

Posted 2023-03-16

【中文标题】使用 swiper.js 库做出反应的 CSS 冲突

【英文标题】：CSS conflict in react using swiper.js library

【发布时间】：2021-02-13 13:07:24

【问题描述】：

我在 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 规则 有什么办法解决吗？

【参考方案1】：

您可以为每个滑块添加一个容器类，并使用该容器类为您的 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;

【讨论】：

如何使用按钮实现相同的功能。组件按钮的 CSS 不同

什么意思？是滑块内的按钮吗？在任何一种情况下，即使按钮不在滑块内，您也可以使用具有特定类的 div 容器包装按钮，并与 swiper 容器执行相同操作

左右方向键对齐方式不同。

我该如何定位他们？

尝试在沙箱codesandbox.io/s/…检查以下代码

【参考方案2】：

你不需要为多个组件使用同一个类。

这样做避免冲突。

.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>
 

【讨论】：

我正在使用 react 及其组件，所以我无法直接添加或访问类