How to style swiper-pagination-fraction in React using WebComponent?

[spacecat]

The problem? I want to change the color of the fraction string 1/3.

How can I style the highlighted div that lives in #shadow-root?

The most obvious thing to try is to:

.swiper-pagination-fraction {
    color: red;
}

But this does not work.

The docs have an example on how to inject styles:

https://swiperjs.com/element#injecting-styles

<swiper-container init="false"> ... </swiper-container>
<script type="module">
  import { register } from 'swiper/element/bundle';

  register();

  const swiperEl = document.querySelector('swiper-container');

  const params = {
    // array with CSS styles
    injectStyles: [
      `
      :host(.red) .swiper-wrapper {
        background-color: red;
      }
      `,
    ],

    // array with CSS urls
    injectStylesUrls: ['path/to/one.css', 'path/to/two.css'],
  };

  Object.assign(swiperEl, params);

  swiperEl.initialize();
</script>

I guess the above will inject my styles into the shadow DOM?

But I don't know how to do this in React? Can someone please provide an example?

[artemshchirov]

up

[spacedev75]

Exactly the same way you show above, and for the React part using web component : https://swiperjs.com/blog/using-swiper-element-in-react