Style order affects borderColor rendering
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
No source file or test is named. First reproduce the issue with the provided Text and View style snippets, then trace the style-processing and PDF border-rendering entry points to find where property order affects borderColor. Done means both property orders render the requested border color, with a regression test covering the two styles.
Written by the indexing model from the issue text.
Description
Describe the bug
There appears to be a style property order dependency issue when using borderColor with borderBottom together. When borderColor is defined before borderBottom, the border color remains black (default) instead of taking the specified color.
However, when the properties are reversed (with borderBottom first, followed by borderColor), the border displays correctly with the specified color.
To Reproduce
Steps to reproduce the behavior:
- Create a PDF document with a
Textcomponent - Apply styling with
borderColordefined BEFOREborderBottom - Render the document
- Observe that the border remains black instead of the specified color
Code snippet that demonstrates the issue:
// This doesn't work - border stays black
const notWorkingStyle = {
borderColor: "#15803d",
borderBottom: 2,
};
// This works correctly - border shows green
const workingStyle = {
borderBottom: 2,
borderColor: "#15803d",
};
...
<View style={styles.section}>
<Text style={notWorkingStyle}>This text has a black border (incorrect)</Text>
<Text style={workingStyle}>This text has a green border (correct)</Text>
</View> - Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 11m
- Merged PRs (30d)
- 2
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from diegomura/react-pdf
-
@react-pdf/font: published types import fontkit, but @types/fontkit is only a devDependencyPossibly taken @iliev-blnk claimed this 5 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
Unable to set flexShrink to 0Possibly taken @adarshsm claimed this 4 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
Maintainers usually reply within 1 day
-
@react-pdf/hyphenate: import-only exports map throws ERR_PACKAGE_PATH_NOT_EXPORTED in require-condition resolvers (every tsx script loading renderer >= 4.7 crashes)Possibly taken @cruzdanilo claimed this 33 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
diegomura/react-pdf#3551 · 2 reactions ·
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 48/100
diegomura/react-pdf#3606 · 3 reactions ·
Maintainers usually reply within 1 day
All issues in diegomura/react-pdf
Similar issues
-
category::task code priority::normal
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
e0ipso/strikethroo#145 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 1-3 hours Newbie friendliness 85/100
cocos/cocos-docs#3333 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
RevenueCat/react-native-purchases#2079 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
RevenueCat/purchases-hybrid-common#2039 ·
Maintainers usually reply within 1 day
-
agent-reported area/react bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day