How to set styles for a class in styled components?

Question

React

How to set styles for a class in styled components?
I want to style the swiper wrapper using the .heroSlider class, how can I do this without creating a component in styled components?

<Swiper
      wrapperTag='ul'
      className='heroSlider'
      allowTouchMove={false}
      speed={600}
    >
...
</Swiper>

Answer 1

It all depends on what Swiper renders.
Well, or you can try to "throw" classes on the component:

const StyledSwiper = styled(Swiper)`
  // содержимое .heroSlider
`;

render(
  <StyledSwiper
      wrapperTag='ul'
      allowTouchMove={false}
      speed={600}
    >
    ...
  </Swiper>
);

Documentation:

• https://styled-components.com/docs/basics#getting-...
  
• https://styled-components.com/docs/basics#styling-...