带有样式组件的滑动按钮样式

Posted 2023-05-08

【中文标题】带有样式组件的滑动按钮样式

【英文标题】：swiper button style with styled-components

【发布时间】：2021-12-16 06:15:35

【问题描述】：

我想用样式组件替换按钮样式 有什么办法？

<SC.CarouselBox 
        loop=true 
        cssMode=true 
        navigation=true 
        mousewheel=true 
        keyboard=true
        slidesPerView=1 
        pagination=
          "clickable": true
         
        className="mySwiper"
      >
        <SC.CarouselBlur></SC.CarouselBlur>
        sliderItems.map((item, i) =>  (
          <SwiperSlide
           <img src=item.img/>
          </SwiperSlide>
        ))
      </SC.CarouselBox>

我在 styled-components 中添加了 swiper 组件，因为我想更改 swiper 样式 但我不能添加按钮，因为按钮不是作为组件给出的

const CarouselBox = styled(Swiper)`
  width: 100%;
  height: 100%;
  display: inline-grid;
`;

const Btn = styled('button')`
  bottom: 10px;
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(50px);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  z-index: 2;
  outline: none;
  border: none;
`;

【参考方案1】：

正确的语法略有不同。您不需要像字符串一样将按钮包裹在括号中。相反，您应该像这样编写代码：

const Btn = styled.button`
  bottom: 10px;
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(50px);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  z-index: 2;
  outline: none;
  border: none;
`;

【参考方案2】：

我使用了一个单独的按钮：

navigation=
   nextEl: ".swiper-next",
   prevEl: ".swiper-prev",



<SC.Btn className="swiper-next">
   next
</SC.Btn>
<SC.Btn className="swiper-prev">
   back
</SC.Btn>