如何在React Slick中的Slider点中添加光滑活动类

Question

我使用了反应光滑并使用Slider组件制作了旋转木马。代码如下，

const carousel = (props) => {
    return (
        <div style={{ height: '50%', marginTop: '20px' }}>
            <Slider {...settings}>
                <div className={text__bar}>
                    <div >
                        <font>Lorum Ipsum 1</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 2</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 3</font>
                    </div>
                    <div className={slide1} />
                </div>
            </Slider>
            <div className={purple__bar}></div>
        </div>
    );
};

和设置对象，

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    className: SlickMain,
    dotsClass: button__bar,
    arrows: false,
};

我添加了一些额外的CSS来设置我的旋转木马圆点（按钮）看起来像波纹管，

在开发人员工具检查时，与当前显示的幻灯片相关的按钮会获得一个名为“slick-active”的CSS类。

我需要做的是将幻灯片对应的按钮的背景颜色更改为黑色，重新显示当前的紫色。

我做的是，

.button__bar li.slick-active button {
    opacity: .75;
    color: #000
}

但它不会起作用。我错过了什么？

.button__bar是我在设置对象中给点的dotsClass。

Answer 1

发生这种情况是因为我正在使用CSS模块加载我的CSS文件。在下面的代码示例中，您可以清楚地看到发生了什么。

https://codesandbox.io/s/1z2lnox5rq?fontsize=14

因此，作为解决方案，我所做的是将波纹管方法添加到设置对象。

const settings = {
  dots: true,
  infinite: true,
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  className: slickMain,
  dotsClass: button__bar,
  arrows: false,
  beforeChange: (prev, next) => {
    this.setState({ currentSlide: next });
  },
  // afterChange: (index) => this.setState({ currentSlide: index }),
  appendDots: dots => {
    return (
      <div>
        <ul>
          {dots.map((item, index) => {
            return (
              <li key={index}>{item.props.children}</li>
            );
          })}
        </ul>
      </div>
    )
  },
  customPaging: index => {
    return (
      <button style={index === this.state.currentSlide ? testSettings : null}>
        {index + 1}
      </button>
    )
  }
};

为了解决我的问题，我使用beforeChange获取下一张幻灯片索引并将其保存在状态中。然后使用带有appendDots的div和ul，将li注入点条部分。在li内部，button使用customPaging方法作为儿童道具通过。当当前幻灯片等于处于状态的customPaging的索引时，则向类注入背景颜色。

const testSettings = {
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    outline: '0'
}