NextJS中使用react-slick为slick-current元素设置自定义样式无效如何解决

问题原因 #

你用的是Next.js的CSS Modules规则，所有在模块CSS文件中声明的普通类名都会被自动加上哈希后缀避免全局污染，你写的.slick-current会被编译为类似slick-current__xxx123的格式，而react-slick动态生成的slick-current类是原生无哈希的，二者无法匹配，所以样式不生效。

解决方案 #

方案1（最优，无需修改第三方类样式） #

你已经通过beforeChange回调拿到了当前激活的slide下标imageIndex，并且已经给当前激活的slide加了styles.activeSlide类，直接给这个类添加对应样式即可：

/* 你的CSS模块文件中 */
.activeSlide {
  position: relative;
  z-index: 50;
  /* 其他你要加的样式 */
}

方案2（修改slick-current类，用全局选择器） #

在CSS模块文件中用:global()标记slick-current为全局类，不需要哈希编译：

/* 你的CSS模块文件中 */
.slider :global(.slick-current) {
  position: relative !important;
  z-index: 50 !important;
}

方案3（全局样式配置） #

在项目的全局CSS文件（比如app/globals.css或者pages/_app.css）中添加样式，同时给Slider加一个全局自定义类避免污染：

1. 修改Slider组件的className：

<Slider {...settings} className={`${styles.slider} custom-slick-slider`}>

2. 在全局CSS文件中添加：

.custom-slick-slider .slick-current {
  position: relative;
  z-index: 50;
}

内容的提问来源于stack exchange，提问作者round_circle