reactstrap - how can I change the color of the <CarouselControl> 's (the small arrows on left/right you click to slide the photos)?

For some reason, I can't change the color of the carousel controls using either inline styling, or css modules...

Any ideas?

Here is the 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;

Here is my tentative css modules file:

.carouselControlWrapper {
    color: black;
}

And yes, I have tried styling the component directly both using inline styling and CSS modules. The wrapper div is my latest attempt.

Help!

Solution

I haven't recreated the exact example above, but I still think my answer will be useful for you.

The reason you can't change the color of the control arrows is because they are background images in reactstrap. Using properties like 'color' or 'background-color' will not work here for that reason. You can use the filter property to play with the image's color in a limited way but I sense it will not solve your problem since what it can do is pretty limited.

What I suggest is following:

First, make sure you are getting the right element. In this case, I'd first suggest trying to change the background-color just to make sure you're targeting the correct element. The element you're looking for is the first <span> under the CarouselControl component. It has the class carousel-control-prev-icon or carousel-control-next-icon depending on direction. You can select it by specifying the class and element, using !important keyword etc.

Once you are sure that you are selecting the right element in your code, remove the background-color property and use a background-url property of your choosing to replace the background-url used in that <span>. You have to do it with an icon of your choosing. A simple example for importing a static resource to a component can be found here for example: https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx

So in short, you need to replace the icon used by reactstrap, that's the only real solution I see here.