NextJS项目中SwiperJS内置类自定义样式不生效如何解决

你遇到的样式不生效问题是两个核心原因导致的：

• CSS Modules 会默认把你在 *.module.scss 中写的所有类名编译为带唯一哈希后缀的局部类，而 Swiper 自带的 .swiper、.swiper-slide 是全局类名，没有哈希后缀，直接写在局部样式里会因为类名不匹配无法命中元素。
• 你给 <Swiper> 组件绑定的 styles.mySwiper 类，和 Swiper 自带的 .swiper 类是挂载在同一个 DOM 节点上的，不是父子嵌套关系，所以你写的 .mySwiper .swiper 选择器永远找不到对应元素。

使用 CSS Modules 提供的 :global() 语法声明 Swiper 原生类为全局类，同时调整选择器层级即可，修改你的 slider.module.scss 为如下写法：

.teste {
  background: blue; // 正常生效

  .mySwiper {
    background: red; // 正常生效

    // & 指代当前 .mySwiper 类，和同节点的全局 .swiper 类匹配
    &:global(.swiper) {
      background: yellow; // 生效
    }

    // 声明 .swiper-slide 为全局类，匹配当前 .mySwiper 下的滑块元素
    :global(.swiper-slide) {
      display: none; // 生效
    }
  }
}

如果需要避免修改全局 Swiper 样式，所有针对 Swiper 原生类的样式都像上面一样包裹在你的自定义类作用域内即可。

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