reactstrap -如何更改<CarouselControl>的颜色(单击左侧/右侧的小箭头可以滑动照片)？

Question

由于某些原因，我不能使用内联样式或css模块来更改carousel控件的颜色。

有什么想法吗？

下面是js文件：

  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是我最新的尝试。

帮助!

Answer 1

我没有重新创建上面的确切示例，但我仍然认为我的答案会对您有用。

不能更改控件箭头颜色的原因是它们是reactstrap中的背景图像。由于这个原因，使用像“color”或“work color”这样的属性在这里是行不通的。您可以使用filter属性以有限的方式处理图像的颜色，但我感觉它不会解决您的问题，因为它所能做的非常有限。

我的建议如下：

首先，确保你得到了正确的元素。在这种情况下，我建议首先尝试更改background-color，以确保您的目标元素是正确的。您要查找的元素是CarouselControl组件下的第一个<span>。根据方向，它有carousel-control-prev-icon或carousel-control-next-icon类。您可以通过指定类和元素来选择它，使用!important关键字等。

确定在代码中选择了正确的元素后，删除background-color属性并使用您选择的background-url属性替换该<span>中使用的background-url。你必须用你选择的图标来做。可以在这里找到一个将静态资源导入组件的简单示例，例如：https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx

所以简而言之，你需要替换reactstrap使用的图标，这是我在这里看到的唯一真正的解决方案。

Answer 2

如果您只想将颜色从白色更改为黑色(这是我们的情况，因为背景是白色的，并且由于缺乏对比度，我们无法正确地看到prev/next按钮)，那么您可以使用：

  .carousel-control-prev-icon,
  .carousel-control-next-icon{
    filter: invert(1)
  }

它不能准确地回答OP，但它是一个很好的技巧，可以帮助避免嵌入您自己的prev/next图像。