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

Question

我想用样式组件替换按钮样式路在何方？

<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 中添加滑动器组件，因为我想改变滑动器样式但我无法添加按钮，因为该按钮未作为组件提供

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;
`;

Answer 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;
`;

Answer 2

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

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


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

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

swiper button style with styled-components

styled-components

swiper