reactstrap - 如何更改 <CarouselControl> 的颜色（单击左/右的小箭头以滑动照片）？答案

【问题标题】：reactstrap - how can I change the color of the <CarouselControl> 's (the small arrows on left/right you click to slide the photos)?reactstrap - 如何更改 <CarouselControl> 的颜色（单击左/右的小箭头以滑动照片）？
【发布时间】：2020-04-29 17:03:23
【问题描述】：

由于某种原因，我无法使用内联样式或 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 是我最近的尝试。

救命！

【问题讨论】：

标签： css reactjs styles reactstrap

【解决方案1】：

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

无法更改控制箭头颜色的原因是它们是 reactstrap 中的背景图像。出于这个原因，使用像“颜色”或“背景颜色”这样的属性在这里不起作用。您可以使用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 使用的图标，这是我在这里看到的唯一真正的解决方案。

【讨论】：

【解决方案2】：

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

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

它并不完全符合 OP，但它是一个很好的技巧，有助于避免嵌入您自己的上一个/下一个图像。

【讨论】：