使用 swiper.js 库进行 React 中的 CSS 冲突

Question

我在 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 规则，我不希望这种情况发生 有什么方法可以解决这个问题吗？

Answer 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;
}