Styling swiper buttons using Web-Components

[mohamed-cherifi]

Hi, I've been trying to override the styling for the swiper buttons. But it seems I am not doing it right.
I tried updating the styles.css file with the following:

.swiper-button-next,
.swiper-button-prev {
  color: red !important;
}

it didn't work 😢
I am using Swiper Element with React.

Any ideas?

[nolimits4web]

You can style web components only using css variables

[bielvelozo]

can you share your code? I have the same problem but it doesn't work for me

[SewaB]

Try using parameter:

injectStyles: [
.swiper-pagination { position: unset; }
]

[jpierson-at-riis]

@SewaB, what was your suggestion meaning to fix?

[ZeroRWV]

I tried to use this approach, but it does not add a event listener on the buttons, so it doesn't work. I was assuming the swiper element js would handle it. Am I missing something?

[microrony]

Anyone trying this, try to set navigation to true as well. So it will be

<swiper-container
      navigation-next-el="#my-next-button"
      navigation-prev-el="#my-prev-button"
      navigation="true"
>
...
</swiper-container>
<button id="my-next-button">Next</button>
<button id="my-prev-button">Prev</button>