responsestrap - как я могу изменить цвет <CarouselControl>(маленькие стрелки влево / вправо вы нажимаете, чтобы скользить фотографии)? - PullRequest
Новая
       9

responsestrap - как я могу изменить цвет <CarouselControl>(маленькие стрелки влево / вправо вы нажимаете, чтобы скользить фотографии)?

1 голос
/ 13 января 2020

По какой-то причине я не могу изменить цвет элементов управления каруселью с помощью встроенного стиля или css модулей ...

Есть идеи?

Вот это js file: 

  return (
    <div>
      <style>
        {
          `.custom-tag {
              max-width: 100%;
              height: 400px;
              background: transparent;
            }

            @media (max-width: 1100px) {
              .custom-tag {
                height: 300px;
              }
            }`
        }
      </style>
      <Carousel
        activeIndex={activeIndex}
        next={next}
        previous={previous}
      >
        <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
        {slides}
        <div className={styles.carouselControlWrapper}>
            <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
        </div>
        <div className={styles.carouselControlWrapper}>
            <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
        </div>
      </Carousel>
    </div>
  );
}

export default GrowCarousel;

Вот мой предварительный css файл модулей: 

.carouselControlWrapper {
    color: black;
}

И да, я попытался стилизовать компонент напрямую, используя встроенный стиль и CSS модули. Div-обертка - моя последняя попытка.

Помощь!

1 Ответ

2 голосов
/ 13 января 2020

Я не воссоздал точный пример выше, но все же думаю, что мой ответ будет вам полезен.

Причина, по которой вы не можете изменить цвет управляющих стрелок, заключается в том, что они являются фоновыми изображениями. в реактивном ремне. Использование таких свойств, как 'color' или 'background-color' не будет работать по этой причине. Вы можете использовать свойство filter, чтобы поиграть с цветом изображения ограниченным образом, но я чувствую, что это не решит вашу проблему, поскольку то, что оно может сделать, довольно ограничено.

Я предлагаю следующее:

Во-первых, убедитесь, что вы получаете правильный элемент. В этом случае я бы сначала предложил изменить background-color, чтобы убедиться, что вы нацеливаетесь на правильный элемент. Элемент, который вы ищете, является первым <span> под CarouselControl компонентом. Он имеет класс carousel-control-prev-icon или carousel-control-next-icon в зависимости от направления. Вы можете выбрать его, указав класс и элемент, используя! Важное ключевое слово et c.

Как только вы убедитесь, что выбираете правильный элемент в своем коде, удалите свойство background-color и используйте background-url свойство по вашему выбору для замены background-url, используемого в этом <span>. Вы должны сделать это с иконкой по вашему выбору. Простой пример импорта ресурса stati c в компонент можно найти здесь, например: https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx

Короче говоря, вам нужно заменить иконку, которую использует responsestrap, это единственное реальное решение, которое я см. здесь.

...