Как задать стили для класса в styled components?

Question

[Alexander]

Как задать стили для класса в styled components?
Хочу стилизовать обертку swiper с помощью класса .heroSlider, как это можно сделать не создавая компонент в styled components?

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

Comments

[WbICHA]

Эммм... Использовать цсс?

Answer 1

[Игорь Тимошенков]

Тут все зависит от того, что рендерит Swiper.

Ну или можно попробовать "накидывать" классы на компонент:

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

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

Документация:

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