I'm working on my portfolio website and I'm doing it with Gatsby. I've imported a Swiper component, precisely a CubeEffect slideshow.
As I have my background black, I would like to change the Swiper Shadow to red (by default is black) but I'm struggling to access to swiper-cube-shadow::before className, because is an own swiper's className.
I've added css style to the Swiper component, to the SwiperSlide component but I don't know how to access to the swiper-cube-shadow component that should be at the same level of the component and consequently to the className...
I cannot add a selector to a component that I don't know how to select, because is inside the Swiper component with is own name and If I create a new component with the same name will not modify the original component but just create a new one.
On the first link you have a picture of the HTML elements (I don't have the privilege to attach an image yet) with the <div class-name:'swiper-cube-shadow'> that I'm trying to customize.
<Swiper css={css `
[css styles]
`}
<SwiperSlide css={css`
[css styles]
`}>
<Dado2/>
</SwiperSlide>
</Swiper>
