react的swiper组件怎么给.swiper-slide-active, .swiper-slide-duplicate-active添加模块化样式

React Swiper是一个用于创建响应式触摸滑块的库，它可以在React应用中轻松集成轮播效果。如果你想为`.swiper-slide-active`和`.swiper-slide-duplicate-active`状态下的slide添加模块化的样式，你可以通过以下步骤操作：

1. 首先，在你的项目中安装Swiper组件，如果还没有安装，可以使用npm或yarn命令：

   npm install swiper react-swiper
   # 或者
   yarn add swiper react-swiper

2. 然后在你的React组件里导入Swiper及其CSS文件：

   import React from 'react';
   import { Swiper, SwiperSlide } from 'react-swiper';
   import 'swiper/dist/css/swiper.css'; // 引入Swiper的CSS

3. 创建一个自定义的样式变量或者在你的全局样式表中定义新的类名，例如：

   /* 如果在全局样式表中 */
   .custom-slide-active {
     background-color: blue;
     border-radius: 5px;
   }

   /* 或者在组件内部 */
   const customSlideActiveStyles = {
     backgroundColor: 'blue',
     borderRadius: '5px',
   };

4. 使用这些样式来应用到`.swiper-slide-active`和`.swiper-slide-duplicate-active`上。你可以在Swiper组件的options中设置类名，并在`.swiper-slide`组件上覆盖默认样式：

   const CustomSwiper = () => {
     const styles = {
       slideActiveClasses: 'custom-slide-active', // 自定义的active类名
       slideDuplicateActiveClasses: 'custom-slide-active', // 同样自定义duplicated active类名
     };

     return (
       <Swiper
         className="swiper-container"
         slidesPerView={1}
         onSlideChangeStart={(prev, next) => console.log(next.isNext)}
         styles={{ ...styles }}
       >
         <SwiperSlide className={['swiper-slide', next.isNext ? styles.slideActiveClasses : '', next.isDuplicate ? styles.slideDuplicateActiveClasses]} />
       </Swiper>
     );
   };

现在，`.swiper-slide-active`和`.swiper-slide-duplicate-active`的状态将应用你自定义的样式。