在Swiper + React中显示"PREV“和"NEXT”字样，而不是导航箭头

npm install swiper react swiper --save

yarn add swiper react swiper

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';

const swiperOptions = {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
};

const MySwiperComponent = () => {
  return (
    <Swiper {...swiperOptions}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

const MySwiperComponent = () => {
  return (
    <div>
      <Swiper {...swiperOptions}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
      <div className="swiper-navigation">
        <div className="swiper-button-prev">PREV</div>
        <div className="swiper-button-next">NEXT</div>
      </div>
    </div>
  );
};

.swiper-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: #ccc;
  padding: 5px 10px;
  cursor: pointer;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #aaa;
}