Я пытаюсь переопределить CSS-классы «response-carousel-component», но в разных частях сайта

Question

В настоящее время я использую реагирующая-карусель для создания слайдера на этом сайте: www.bosquo.pl проблема в том, что карусель используется в разных частяхвеб-сайта и в зависимости от части, которую я хочу переопределить по-разному.Например, на стороне кода

Я уже пытался переопределить в таблице стилей CSS, но изменение распространяется на все компоненты.

Я хотел бы иметь один раздел с использованием Карусели с одним стилем идругой раздел с другим стилем.

Answer 1

Просто оберните ваш компонент карусели в div с определенным классом.И используйте этот класс для нацеливания на карусель.

Ваш код jsx:

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

А затем вы наберете код scss:

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

Answer 2

Вы можете добавить Id для родителя (spacific Items или вашего класса) в своем HTML-коде, и тогда вы сможете адресовать свой селектор css к вашему ID-идентификатору родителя. (если вы имеете в виду переопределение, то, как сказал «TheUnknow», вы можете использовать «важный» после значений Css.

ех. вашего HTML-кода:

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

ех. вашего Css:

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