Javascript 如何在React slick中的滑块点中添加slick活动类

我使用react slick并使用滑块组件制作了一个旋转木马。代码如下：

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>
    );
};

我已经添加了一些额外的CSS，使我的旋转木马点（按钮）看起来像贝娄

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

我需要做的是将幻灯片对应的按钮的背景色更改为黑色，将当前的紫色还原为黑色

我所做的是

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

但这行不通。我错过了什么

---

.button\u bar是我给设置对象中的点指定的点类。

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

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>
    )
  }
};

所以，作为一个解决方案，我所做的是向设置对象添加以下方法

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>
    )
  }
};

---

我使用了

：global（）

在您的特定情况下，添加

li.slick-active

-->

：全局（li.slick-active）

---

这里是一个从您的

分叉的，以防有人在使用材质ui，这里是它的工作原理

const settings: Settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  dotsClass: `slick-dots ${classes.dots}`,
};
// your classes created with material ui
makeStyles((theme: Theme) => ({
// may not be the best way but it works
  dots: {
    bottom: 0,
    "& li.slick-active button::before": {
      color: theme.palette.primary.main,
    },
    "& li": {
      "& button::before": {
      fontSize: theme.typography.pxToRem(14),
      color: "#fff",
      opacity: 0.5,
    },
  }
}))

这里是一个代码沙盒链接

请注意，我还没有检查它与导入光滑的css，即

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

---

但是用cdn代替了

你需要设置

.button\u bar li.slick active

的样式而不是

.button\u bar li.slick-active按钮

？除非按钮实际存在于

li

中

按钮
在
li
中查看示例，按钮样式是使用
应用的：在
伪类之前，您尝试过吗
.button\uuu bar li.slick-active button:before{opacity:.75；color:#000}
是，无需在
之前应用
。是否使用
dotsClass:'button\uu bar'
而不是在此处使用
button\uu bar
对象？
const settings: Settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  dotsClass: `slick-dots ${classes.dots}`,
};
// your classes created with material ui
makeStyles((theme: Theme) => ({
// may not be the best way but it works
  dots: {
    bottom: 0,
    "& li.slick-active button::before": {
      color: theme.palette.primary.main,
    },
    "& li": {
      "& button::before": {
      fontSize: theme.typography.pxToRem(14),
      color: "#fff",
      opacity: 0.5,
    },
  }
}))

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";