SwiperReact：NextJs 中的样式导航箭头？

【问题标题】：SwiperReact: Style navigation arrows in NextJs?SwiperReact：NextJs 中的样式导航箭头？
【发布时间】：2021-03-25 15:29:31
【问题描述】：

我在 NextJs 中使用 Swiper React 组件创建了一个滑块，但导航道具设置为“true”时会呈现一些我想要设置样式的难看的蓝色箭头。
为了给我的组件设置样式，我使用“@material-ui/core/styles”中的 makeStyles，我显然无法在我的组件中导入 css 文件，除非它是我的自定义 _app.js。
有没有办法可以在 NextJs 中设置导航样式？

【问题讨论】：

标签： reactjs next.js swiper.js

【解决方案1】：

您可以制作自定义导航并通过 Swiper 的导航（或其他）属性中的引用来引用它。

<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,
        }}
      >

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。