Question

我当前正在使用 reactive- response-carousel 在此网站上制作滑块：www.bosquo.pl，问题是该轮播在网站的不同部分中使用，并且取决于我想以不同的方式覆盖。例如在代码方面

我已经尝试在CSS样式表中进行覆盖，但是更改会传播到所有组件。

我想让一个部分使用轮播，一种样式，另一部分使用另一种样式。

Answer 1

您可以在HTML代码中为（spacific Items或您的类）的父级添加一个ID，然后就可以将css选择器分配给类usign parentID。（如果您的意思是覆盖，则如“ TheUnknow”所说，您可以在Css值后使用“！important”。

例如您的HTML代码：

<div id='parent'>
<div class='items'></div>
<div class='items'></div>
<div class='items'></div>
</div>

例如您的CSS：

#parent items {
width:20px !important)
}

Answer 2

只需将您的轮播组件包装到具有特定类的div中即可。并使用该类定位轮播。

您的jsx代码：

const TwoCarousel = () => {
    return (
        <div>
            <div className="carousel1">
                <CarouselComponent />
            </div>
            <div className="carousel2">
                <CarouselComponent />
            </div>
        </div>
    );
};

然后您选择代码：

.carousel1 {
  .slider-wrapper {
    border: 1px solid blue;
  }
}
.carousel2 {
  .slider-wrapper {
    border: 1px solid red;
  }  
}

我正在尝试覆盖“ react-carousel-component”的CSS类，但在网站的不同部分中

2 个答案: