React Swiper中.swiper-slide-active控制自定义样式失效问题求助

使用React Swiper组件时，尝试通过.swiper-slide-active类控制自定义类（swiperSlide、collection）的样式，但自定义样式未按预期生效。以下是相关代码：

组件代码 #

import styles from './styles.module.css';

export default function SwiperProduct() {
  
  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectFade]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      autoplay={{ delay: 4000, disableOnInteraction: true }}
      effect="fade"
      pagination={{ clickable: true }}
    // scrollbar={{ draggable: true }}
      
    >
      <SwiperSlide className='p-5 d-flex justify-content-center'>
        <img className='object-fit-cover' src={phones} width='100%' height='400px' alt='' />
        <article className={`position-absolute text-start ${styles.swiperSlide}`}>
          <article className={`p-5 ${styles.collection}`}>
            <p className={'pt-5'}>NEW COLLECTION</p>
            <button className='btn btn-outline-warning'>Shop Now</button>
          </article>
        </article>
      </SwiperSlide>
    </Swiper>
  );
}

CSS代码（styles.module.css） #

.swiperSlide {
    background-color: rgba(240, 248, 255, 0.212); 
    height: 400px;
    width: 820px;
    opacity: 0;
}
.swiper-slide-active .swiperSlide {
    opacity: 0;
    transition: 1s ease;
}
.collection {
    transform: translate(-85px);
    opacity: 0;
    transition: 1s ease;
    height: 400px;
    width: 820px;
}

.swiper-slide-active .collection {
    opacity: 1;
    transition: 1s ease;
    transform: translateX(0);
}

问题原因与解决办法 #

核心原因 #

你使用了CSS Modules，它会自动将自定义类名（如swiperSlide、collection）哈希化（例如变成swiperSlide_abc123）。而Swiper添加的.swiper-slide-active是全局类名，无法匹配哈希后的类名，导致样式选择器失效。

解决步骤 #

1. 修改CSS选择器，兼容CSS Modules
   在CSS中使用:global()包裹全局类.swiper-slide-active，既能保留自定义类的哈希化特性，又能正确匹配Swiper的全局类：

   .swiperSlide {
       background-color: rgba(240, 248, 255, 0.212); 
       height: 400px;
       width: 820px;
       opacity: 0;
   }
   :global(.swiper-slide-active) .swiperSlide {
       opacity: 1; /* 原代码写的0是笔误，改成1才能让元素在激活状态显示 */
       transition: 1s ease;
   }
   .collection {
       transform: translate(-85px);
       opacity: 0;
       transition: 1s ease;
       height: 400px;
       width: 820px;
   }
   
   :global(.swiper-slide-active) .collection {
       opacity: 1;
       transition: 1s ease;
       transform: translateX(0);
   }
   

2. 修正笔误
   原CSS中.swiper-slide-active .swiperSlide的opacity设为0，这会导致激活状态下元素依然隐藏，改成opacity:1才能达到预期的显示效果。

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