Блог

Главная - Вопросы по программированию - стиль кнопки swiper со стилизованными компонентами

стиль кнопки swiper со стилизованными компонентами

#styled-components #swiper

Вопрос:

Я хочу заменить стиль кнопки компонентом стиля, каков способ?

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

я добавляю компоненты 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>
Метки: