wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

Home Page:https://projects.wojtekmaj.pl/react-pdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

  1. Two tags nested in parent tag. First child tag has bold styles, second child tag has regular styles. Render outcome: both are bold.
  2. Two tags nested in parent tag. First child tag has regular styles, second child tag has bold styles. Render outcome: both are regular.
  3. No parent tag. Each text tag renders correctly for their respective styles
Screenshot 2024-05-09 at 10 11 39 AM

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