Cascade layers in custom classes for react-splide

[vmityagin]

Hi!
I'm trying to set a custom style for arrows. I chose yellow for the buttons. But the priority of the standard style is "spilde__arrow". Buttons change color to gray :(

I understand that the problem is cascading. But I don't understand how to solve it. I don't want to use the "!important" solution. I want to understand how to increase the priority of custom style.

      <Splide
        className="splide"
        hasTrack={ false }
        options={ {
          type: 'slide',
          pagination: false,
          perPage: 3,
          perMove: 1,
          gap: '1rem',
          arrows: true,
          classes: {
            arrows: 'splide__arrows',
            arrow : 'splide__arrow splide__test',
          },
        } }
      >
        <SplideTrack>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
          <SplideSlide><Model /></SplideSlide>
        </SplideTrack>
      </Splide>

[NaotoshiFujita]

Increase "Specificity":
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

...or use the core file that does not include arrow styles:
https://splidejs.com/guides/getting-started/#files

...or use !important.