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

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属性(property)和使用background-url您选择的属性来替换 background-url用于<span> 。您必须使用您选择的图标来完成此操作。可以在此处找到将静态资源导入组件的简单示例，例如: https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx

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