CODEWITHSUNDEEP
reactjsnext.jsswiper.js
Zakaria
Zakaria

Reputation: 440

SwiperReact: Style navigation arrows in NextJs?

I created a slider with Swiper React Components in NextJs, but the navigation prop when set to "true" renders some ugly blue arrows that I would like to style.
To style my components I use makeStyles from "@material-ui/core/styles" and I apparently can't import css files in my components, unless it's my custom _app.js.
Is there a way I can style the navigation in NextJs?

Upvotes: 0

Views: 937

Answers (1)

mordoss
mordoss

Reputation: 43

You can make your custom navigation and reference it via refs inside Swiper's navigation (or other) property.

<div className="pokerGames__navigation">
        <div className="arrow arrow-prev" ref={navigationPrevRef}></div>
        <div className="arrow arrow-next" ref={navigationNextRef}></div>
      </div>
      <Swiper
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
      >

Upvotes: 1

Related Questions