How to style navigation arrows in NextJs?

[zakariamofaddel]

I really can't understand how to change the color of the navigation arrows in my NextJs application. I read the docs multiple times and read some blog posts, but all of them either don't use React or, if they do, they simply import a stylesheet to the component and overwrite the navigation arrows with nextEl and prevEl.
I can only import css modules in my nextJs component and that won't work, because it creates a class that is made unique in the rendered HTML by adding the file name and all that good stuff.

Is there a way I can target the navigation?

[vltansky]

you can use CSS Variables.
E.g:
--swiper-navigation-color: #ccc;

see sources: https://unpkg.com/browse/[email protected]/components/navigation/navigation.scss

.swiper-button-prev,
.swiper-button-next {
....
  color: var(--swiper-navigation-color, var(--swiper-theme-color));

[zakariamofaddel]

Thank you for the reply! But where should I use them? The problem is that I can't find a way to target the arrows. In the code snippet you wrote it looks like normal css, but I can't import regular css in my component, unless it's the custom _app component...

[vltansky]

I didn't mean that you use the snippet. Snipper represents the source code. You should use --swiper-navigation-color variable.
For example:

:root{
--swiper-navigation-color: #ccc;
}
// or
body{
--swiper-navigation-color: #ccc;
}

[zakariamofaddel]

I don't think I explained my problem good enough :(
How can I reference those arrows in my component? I wish I could create a css file for my component, but I can't... because in NextJs you can import .css files only in the root component or you have to turn them into .module.css and that doesn't work.

This is the code inside my component:

<Swiper
				thumbs={{ swiper: thumbsSwiper }}
				lazy={{ loadPrevNext: true }}
				tag="section"
				wrapperTag="ul"

                                navigation

				speed={350}
				effect="fade"
				autoplay={{ delay: 10000, disableOnInteraction: true }}
				loop={true}
			>
				<SwiperSlide className={classes.swiperSlide} tag="li">
					<img src={product.image} className={classes.image} />
				</SwiperSlide>
				<SwiperSlide className={classes.swiperSlide} tag="li">
					<img src={product.imageHover} className={classes.image} />
				</SwiperSlide>
			</Swiper>

[vltansky]

#4060
#4053
This should help you :)

[levipadre]

Hi @zakariamofaddel. I know it's an old post, but did you solve this with module at the end? Any other way?

[nolimits4web]

You can assign css class to component or just set it directly:

<Swiper style={{ '--swiper-navigation-color': 'red' }} ...>

[U-M-97]

I want to add custom icon as a background image in
.swiper-button-next {
background-image: url(any url)
}

.swiper-button-prev{
background-image: url(any url)
}

but How to use that css ?

[fkazemi5236]

any solution??

[U-M-97]

use custom buttons and add onclick event on them
use useRef for swiper functions

const swipeRef = useRef(null);

and in Swiper component add this prop

onBeforeInit={(swiper) => {
swipeRef.current = swiper;
}}

and in button
onClick={() => swipeRef.current?.slideNext()}
onClick={() => swipeRef.current?.slidePrev()}