Text styling ignored in react-pdf/render

Question

I'm using (or trying to use) react-pdf/renderer to generated formatted PDF output for a React project. I can get the output; but it's not formatted.

I assume I'm doing something wrong, but I'm creating my PDF like this:

export function PDFOutput() {
 return (
 <Document>
 <Page>
 <Text style={{
 fontFamily: "Courier",
 fontSize: "12pt"
 }}>
 Testing
 </Text>
 </Page>
 </Document>
 )
}

and rendering/display it like this:

 const PdfRoot = () => (
 <PDFViewer>
 <PDFOutput/>
 </PDFViewer>
 );
 
 const container = document.getElementById('pdf-root');
 if (pdfRoot == null)
 pdfRoot = createRoot(container);
 pdfRoot.render(<PdfRoot/>)

but the result I get is this:

enter image description here

In other words, the Text's style formatting is ignored. ("Courier" is a built-in supported font, so does not have to be otherwise registered.) Doing almost exactly the same thing in the project website's Repl playground works, however, so I'm not sure what the difference is.

Answer 1

This is a known issue in the new versions of @react-pdf/renderer. There is a temporary fix to this until it's resolved in the new release.

If you are using npm, Add an overrides property in your package.json :

"overrides": {
 "@react-pdf/layout": "3.11.5"
},

---

Yarn has a similar feature with the resolutions property :

"resolutions": {
 "@react-pdf/layout": "3.11.5"
},

• KT_: Doesn't seem to make a difference (in my case), but thanks all the same!