reactstrap

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 中的背景图像。出于这个原因，使用 'color' 或 'background-color' 之类的属性在这里不起作用。您可以使用 filter 属性以有限的方式调整图像的颜色，但我感觉它不会解决您的问题，因为它能做的非常有限。

我的建议如下：

首先，确保您获得了正确的元素。在这种情况下，我首先建议尝试更改 background-color 以确保您定位的是正确的元素。您要查找的元素是 CarouselControl 组件下的第一个 <span>。它有 class carousel-control-prev-icon 或 carousel-control-next-icon 取决于方向。您可以 select 通过指定 class 和元素，使用 !important 关键字等

一旦您确定您在代码中 select 使用了正确的元素，请删除 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 图片。

reactstrap - 我怎样才能改变 <CarouselControl> 的颜色（left/right 上的小箭头你点击滑动照片）？

reactstrap - how can I change the color of the <CarouselControl> 's (the small arrows on left/right you click to slide the photos)?

css

styles

reactjs