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

由于某些原因，我无法使用内嵌样式或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模块来设置组件的样式。包装器div是我最新的尝试

---

救命啊

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

无法更改控件箭头的颜色的原因是，它们是reactstrap中的背景图像。因此，使用“颜色”或“背景色”等属性在此处不起作用。您可以使用filter属性以有限的方式处理图像的颜色，但我感觉它无法解决您的问题，因为它所能做的非常有限

我的建议如下：

首先，确保您得到了正确的元素。在这种情况下，我首先建议尝试更改背景颜色，以确保您针对的是正确的元素。您要查找的元素是CarouseControl组件下的第一个元素。根据方向的不同，它具有类转盘控制上一个图标或转盘控制下一个图标。您可以通过使用指定类和元素来选择它！重要关键词等

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

---

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

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

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

它并不完全符合OP，但这是一个很好的技巧，可以帮助避免嵌入您自己的上一张/下一张图像

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