React Swiper のNavigation を使用した時の矢印アイコンのデザインをカスタマイズしたい

Question

1. 実現したいこと
   Swiper のReact版 を使用しているのですが、左右の矢印アイコンのデザインをカスタマイズしたい
   ※Swiper React
   https://swiperjs.com/react

2.発生している問題・エラーメッセージ
ライブラリ内の左右の矢印アイコンclass要素もしくは擬似要素

.swiper-button-next .swiper-button-prev .swiper-button-next::after .swiper-button-prev::after

にcssを適用しても効かない。

3.該当のソースコード
index.tsx

~SCSS読み込み省略~
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/navigation'
import { Navigation } from "swiper";

return (
<MedicationLists>
 <Swiper
             slidesPerView={4}
             spaceBetween={-15}
             slidesPerGroup={1}
             loop={false}
             loopFillGroupWithBlank={false}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
                                        >
 <SwiperSlide>HTML要素</SwiperSlide>
 <SwiperSlide>HTML要素</SwiperSlide>
 <SwiperSlide>HTML要素</SwiperSlide>
 <SwiperSlide>HTML要素</SwiperSlide>
 </Swiper>
</MedicationLists>
)

a.scss

.medicationLists {
    display: flex;
    justify-content: space-evenly;

//ここが効かない
    .swiper {
     .swiper-button-next {
      left: 50px;
      background-color: #333;
}
     .swiper-button-prev {
      right: 50px;
      background-color: #333;
 }
}

4.自分で調べたことや試したこと

ライブラリのオプションを使用したもののnavigationの左右アイコンの調整が出来なかった。
https://swiperjs.com/swiper-api#parameters

よろしくお願い致します。

Comments

[Lhankor_Mhy]

詳細度のような気がします。
インラインで書くか、あるいは !important をつけるとどうなりますか？

[Daniel0801]

すみません、自力で解決致しました。

swiper に適当なclassName を当ててその中で、:global(.swiper-button-prev)でcssを記述すると適用されました。

コメントありがとうございます!

Answer 1

swiper のclassName="mySwiper" 内で :global(.swiper-button-prev)でcssを記述すると適用されました。

:global(.mySwiper) {
        :global(.swiper-button-prev) {
            ここにcssを記入...
        }
    }