反应 pdf 重复故障

Question

嗨，我对 react-pdf 有疑问。这是故障，我不知道为什么。

我的密码是

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
  
  

export const HandOutTab = () => {
    
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1);
  
    function onDocumentLoadSuccess({ numPages }) {
      setNumPages(numPages);
    }
    
  function changePage(offset) {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }

  function previousPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }
  
    return (
      <div>
        <Document 
          file="https://s3.eu-central-1.wasabisys.com/pdf-parttime-bijbelschool-jaar-1/PBS1%20-%20M6%20-%20Les2%20-%20Rentmeesterschap.pdf" 
          onLoadSuccess={onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>
          Page {pageNumber} of {numPages}
        </p>
        <button onClick={() => previousPage() } >Vorige</button>
        <button onClick={() => nextPage() } >Volgende</button>
      </div>
    )
}

这就是我看到的

现在这是 react pdf 的源代码

所以我不知道发生了什么。

蓝色故障看起来像我在文档下方的按钮的颜色，但奇怪的是，如果我删除这些按钮，故障保持不变。

顺便说一句，我使用 create-react-app

Answer 1

我已经找到答案了。

我在我的全局样式中有这个（我使用样式组件）

span {
    background: linear-gradient(75deg, #3B43F2, #3B8CF2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     font-weight: 800;
}

所以我删除了那些样式，蓝色渐变消失了。

反应 pdf 重复故障

react pdf duplicate glitch

reactjs

react-pdf