restraps-如何更改 的颜色（单击以滑动照片的左/右小箭头）？

Question

由于某种原因，我无法使用内联样式或CSS模块来更改轮播控件的颜色...

有什么想法吗？

这是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中的背景图像。因此，无法使用“颜色”或“背景颜色”之类的属性。您可以使用filter属性以有限的方式播放图像的颜色，但是我认为它不能解决您的问题，因为它可以做的非常有限。

我的建议如下：

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

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

总之，您需要替换reactstrap使用的图标，这是我在这里看到的唯一真正的解决方案。