swiper button style with styled-components - styled-components

Question

I want to replace button style with a style-component
What is the way?
<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>
i am add swiper components in styled-components, because i want change swiper style
but I can not add a button because the button is not given as a component
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

I used a separate button:
navigation={{
nextEl: ".swiper-next",
prevEl: ".swiper-prev",
}}
<SC.Btn className="swiper-next">
next
</SC.Btn>
<SC.Btn className="swiper-prev">
back
</SC.Btn>

Answer 2

The correct syntax is slightly different. You don't need to wrap your button in brackets like a string. Instead you should write your code like this:
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;
`;