styled-components - 带有样式组件的滑动按钮样式

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 中添加了 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-componentsswiper

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