diegomura / diegomura/react-pdf
Rendered Text component content disappears when using inline styles with lineHeight
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
I create a Text element and add a render function to display page and total page. Then I add custom styling like fontSize, FontFamily and so on. When I add lineHeight with any numeric value, the text disappears.
**To Reproduce**
Steps to reproduce the behavior including code snippet (if applies):
1. Go to [code snippet (react pdf REPL)](https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a06180076a0736402e191876a004d8404b305df8036000c3002f801a563001188001efd0407731c2a017e01c80232cd901484d298016da852e1201088285043dfe019965d868530b20500128898802b843f002b228a9b270f001c947d9aa86c40aab24804189418b829b51a840822145d2d9e7a87978f8c0013007d4a0019943f3b5b1b051897010f4c1f7f5d26940020a210d829b032181d0509aab2b30280250037333328242c308830060c3d2a800f000899c672d4001f3d75c002b7321c2e0a3a230205010520a5900a38188005ec87400089a60016584c174146a3b15efd7eb5c002ac829b3da6fc3c54c5145020c0e66064000259043118c1a860611928c201a8c0a82cd0848b8304e944c0c062a95ae007a124bdea6c5c7e36080986311854da7d3863d3302814cf330c1c5303304aa598ac4c0e504d7313e56c8a6aae90cd833359fa23173962141a48054291494c0c6f969ab116856fc952a891ab1dbc2d783b99eff93084690c96428762f141a8884f8f0d03b0c33d2e32fe8000c00248c507a532a17041aab599cde7500a32e97b60de0f9bc5add344beec0478ad5e7b039846822f7adc0062a404e85e8a7601ec80000)
2. text under A: is displayed, the text under B: is not displayed
Code snippet:
```jsx
const styles = StyleSheet.create({
page: { padding: 60 },
box: { width: '100%', marginBottom: 30, borderRadius: 5 },
pageNumbers: {
position: 'absolute',
bottom: 20,
left: 0,
right: 0,
textAlign: 'center'
},
});
const doc = (
A: Text with lineHeight and without rendering function:
1 / 1
B: Text with lineHeight and with rendering function
(
`${pageNumber} / ${totalPages}`
)} />
);
ReactPDF.render(doc);
```
**Expected behavior**
The text with render function under B: appear.
**Desktop (please complete the following information):**
- OS: MacOS 15.2
- Browser chrome
- @react-pdf/render v4.1.6
- @react-pdf/layout v4.2.0
Contributor guide
Assessment
This issue has not been assessed yet.