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

【问题标题】：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;
`;

【问题讨论】：

标签： styled-components swiper

【解决方案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>

【讨论】：