在 Swiper + React 中显示单词“PREV”和“NEXT”而不是导航箭头答案

【问题标题】：Words "PREV" and "NEXT" display instead of navigation arrows in Swiper + React在 Swiper + React 中显示单词“PREV”和“NEXT”而不是导航箭头
【发布时间】：2019-10-09 07:08:54
【问题描述】：

箭头不显示。取而代之的是“PREV”和“NEXT”文本显示在它们的位置。

我已经确认 swiper.css 正在加载。 PREV 和 NEXT 文本运行正常。单击它们会按预期更改图像和移动滑动手势功能。

编辑：codepen 在这里：https://codepen.io/davrosfl/pen/OJJPegm 很奇怪，它在 codepen 中运行良好，但在我的本地机器上却不行。相同的代码。

import Swiper from 'swiper';
import './Project2.css';
import 'swiper/css/swiper.css';

class Project2 extends Component {

    componentDidMount() {
        this.mySwiper = new Swiper('.swiper-container', {
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            observer: true,
            observeParents: true
        });
    }

    render() {
        return (
            <div className="swiper-container" ref={div => this.carouselRef = div}>
                <div className="swiper-wrapper">

                    <div className="swiper-slide">
                        <img src={`${process.env.PUBLIC_URL}/images/01.jpg`} />
                    </div>
                    <div className="swiper-slide">
                        <img src={`${process.env.PUBLIC_URL}/images/02.jpg`} />
                    </div>
                </div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>
        )
    }
}

export default Project2;

CSS

.swiper-container {
    height: calc( (var(--vh, 1vh) * 100) - 10.75vh );
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

我希望显示导航箭头而不是“PREV”和“NEXT”

【问题讨论】：

文本“PREV”和“NEXT”从何而来？看上面的代码还不清楚。
你能分享一个codepen吗？我没有发现任何问题
@HoratiuJeflea 我使用 codepen 链接进行了编辑。它在 codepen 中运行良好，但我的 env 中的相同代码会产生 PREV NEXT 文本。
css 似乎是问题所在，您可以在本地保存 swiper.min.css 并引用该文件吗？
@HoratiuJeflea 我确实将 unpkg.com/swiper@5.0.4/css/swiper.css 中的 css 复制到了本地 css 文件中。我的类定义在同一个文件中，并且它们正在被应用。我只是再次确认并仍然显示 NEXT 和 PREV。

标签： reactjs swiper

【解决方案1】：

放置 text-transform: 大写；在body标签的样式中会产生这个bug。例如：

body {
    text-transform: uppercase;
}

【讨论】：