background-color not working when using certain CSS properties while cascading styles

[pwnedev]

Problem

While cascading styles in different html tags, when I use the CSS properties: font-weight, text-decoration or color, the background-color property stops working. However everything else seems to work with cascading styles.

Example

<style>
  p, span, em {
    margin: 0 !important;
  }
  .highlightClass {
    background-color: #ffff00;
  }
</style>
<div style="padding-left: 8px; padding-right: 8px;">
  <p><span class="highlightClass">Normal</span></p>
  <p><span class="highlightClass"><strong>Bold</strong></span></p>
  <p><span class="highlightClass"><em>Italic</em></span></p>
  <p><span class="highlightClass"><strong><em>Bold+Italic</em></strong></span></p>
  <p><span class="highlightClass"><span style="text-decoration: line-through;">Line through</span></span></p>
  <p><span class="highlightClass"><span style="text-decoration: underline;">Underline</span></span></p>
  <p><span class="highlightClass"><span style="text-decoration: line-through;"><span style="text-decoration: underline;">Line through + Underline</span></span></span></p>
  <p><span class="highlightClass"><span style="color: blue;">Blue text</span></span></p>
</div>

Result

As you can see, the background-color property is set to #ffff00, which should result in a yellow background color for all elements with the class "highlightClass". However, when I apply any of the mentioned CSS properties to these elements, the background-color property stops working.

[danomatic]

Interesting. It seems the styles are not being inherited. I'm trying to determine if this is an issue with react-pdf

[danomatic]

It looks like the react-pdf-html rendering is resulting in this for the last paragraph in your example:

<View>
  <Text>
    <Text
      style={[
        {
          margin: '0',
        },
        {
          backgroundColor: '#ffff00',
        },
      ]}
    >
      <Text
        style={[
          {
            color: 'blue',
          },
          {
            margin: '0',
          },
        ]}
      >
        Blue text
      </Text>
    </Text>
  </Text>
</View>

The extra Text wrapper causes a loss of the background color in react-pdf. I'm not yet sure why.

[danomatic]

This is a reported bug with react-pdf:
diegomura/react-pdf#2316

...BUT I just published an update with a fix for your exact issue. Enjoy!