Bug where styles are not correctly inherited
iSilkline opened this issue · comments
Before you start - checklist
- I followed instructions in documentation written for my React-PDF version
- I have checked if this bug is not already reported
- I have checked if an issue is not listed in Known issues
- If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo
Description
When using tags nested in another tag, styles are not correctly rendered.
Steps to reproduce
Reproduce using this code
// Font Import
Font.register({
family: 'Inter-Regular',
src: 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZg.ttf',
});
Font.register({
family: 'Inter-Bold',
src: 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZg.ttf',
});
// Create styles
const styles = StyleSheet.create({
page: {
paddingTop: 35,
paddingBottom: 65,
paddingHorizontal: 35,
fontFamily: 'Inter-Regular',
fontSize: 9,
},
regularText: {
fontFamily: 'Inter-Regular',
},
boldText: {
fontFamily: 'Inter-Bold',
},
});
<Document>
<Page size="A4" style={styles.page}>
{/* Example of text style inheritance bug */}
<Text style={[styles.regularText]}>
<Text style={[styles.boldText]}>{`Label: `}</Text>
<Text style={[styles.regularText]}>{`Value`}</Text>
</Text>
<Text style={[styles.boldText]}>{`Label: `}</Text>
<Text style={[styles.regularText]}>{`Value`}</Text>
</Page>
</Document>
Expected behavior
Each tag should render for it's own styles (or inherits styles from parent tags), and should not be attributed styles of preceding tag.
Actual behavior
When nested in a parent tag (regardless of that tag's styles), the second child tag is incorrectly attributed the styles of the first child tag.
See three examples in the screenshot below:
- Two tags nested in parent tag. First child tag has bold styles, second child tag has regular styles. Render outcome: both are bold.
- Two tags nested in parent tag. First child tag has regular styles, second child tag has bold styles. Render outcome: both are regular.
- No parent tag. Each text tag renders correctly for their respective styles
Additional information
No response
Environment
Chrome: 124.0.6367.119
├─ @react-pdf/fns@2.2.1
├─ @react-pdf/font@2.5.1
├─ @react-pdf/image@2.3.6
├─ @react-pdf/layout@3.12.1
├─ @react-pdf/pdfkit@3.1.10
├─ @react-pdf/png-js@2.3.1
├─ @react-pdf/primitives@3.1.1
├─ @react-pdf/render@3.4.4
├─ @react-pdf/renderer@3.4.4
├─ @react-pdf/stylesheet@4.2.5
├─ @react-pdf/textkit@4.4.1
└─ @react-pdf/types@2.5.0