Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

classesStyles properties don't override baseFontStyle properties

See original GitHub issue

classesStyles properties override the corresponding baseFontStyle properties only if the tagsStyles have the same properties.

For example:

<HTML
    html={'Just text <p>Normal paragraph</p><p class="smallRedFont">Small red paragraph</p>'}
    baseFontStyle={{ fontSize: 20, color: 'green' }}
    tagsStyles={{ p: { lineHeight: 30 } }}
    classesStyles={{ smallRedFont: { fontSize: 10, color: 'red' } }}       
 />

fontSize and color properties of smallRedFont class won’t override fontSize and color of baseFontStyle, because tagsStyles for p doesn’t include these properties.

In this case, however,

<HTML
    html={'Just text <p>Normal paragraph</p><p class="smallRedFont">Small red paragraph</p>'}
    baseFontStyle={{ fontSize: 20, color: 'green' }}
    tagsStyles={{ p: { fontSize: 16, color: 'blue' } }}
    classesStyles={{ smallRedFont: { fontSize: 10, color: 'red' } }}       
 />

fontSize and color properties of smallRedFont class will override fontSize and color of baseFontStyle, because tagsStyles for p does have these properties.

Issue Analytics

State:
Created 6 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

Exilzcommented, Feb 13, 2018

Hi, thanks for the very precise explanation and reproduction of this issue.

Could you try replacing the line 444 from HTML.js

from :

const textElementStyles = this.filterBaseFontStyles(element, classStyles, props);

const textElementStyles = parentTag && TEXT_TAGS.indexOf(parentTag) !== -1 ? {} : this.filterBaseFontStyles(element, classStyles, props);

Basically, what I’ve done here is not to apply baseFontStyle to text nodes nested inside other text nodes, since the parent should be the one receiving the style anyway.

I’m pretty concerned with regressions, and the demo isn’t complete enough for me to check all use cases. I’d like you to tell me if it fixed it for you, and if you see any potential drawbacks.

1reaction

Exilzcommented, Mar 23, 2018

Holy moly, I think I’m getting there. I’ll create a separate branch so you can take a look at it and test it yourselves. This won’t be part of the next release since this is quite a major rewrite.