diegomura / diegomura/react-pdf
CSS inheritance
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
In some cases, color is not inherited:
- explicit inheritance for links, using `{color: 'inherit'}` in the style prop of a `Link` element
- in SVG, when the `fill` attribute (of a `path` for example) is not given, the shape should appear black or inherit from the parent text color. But in `react-pdf`, the SVG appears transparent except if the filling is explicitly set.
**To Reproduce**
Here are examples showcasing what I'm saying
Link color:
```jsx
const EmbdedLink = () => (
I want this text and the following link to be blue
Link
)
```
In this case, the `inherit` CSS value seems not to have been implemented yet. The render causes a type error
(see [repl](https://react-pdf.org/repl?code=3187b0760ce02e0040a205b011804c0a6280c812cc06b1805e1800a0128880f9480a061801e004446005704d30a4ae9804806001402180733430236005e69080220082005816f7a9b180356c6803b94a8013c00dbc80de1742990009c0170c00e47633380be1e356cd0c00a9a00078f00248c3e88b70c140005b6040c706c144a0c6c6480198829adbeae188c29ae0114080c12249b8a03003d20484fafa30e3e149db022ac541400038403ad6d5b88b014002d2f4a26401d3d98ad429199a5b58e7d93b3ae065db61427b7ab5e1d51d35fad6e8199dd68848f9d4b3b2737350d190d07e7cd00129a28d4108980031199b8c0e83b0901888540608e305aa50c8006e1a100000))
SVG filling:
```jsx
const Mail = ({style}) => (
)
```
[repl](https://react-pdf.org/repl?code=3187b0760ce02e0040a205b011804c0a6280c812cc06b1805e1800a0128880f9480a061801e004446005704d30a4ae9804806001402180733430236005e69080220082005816f7a9b180356c6803b94a8013c00dbc80de1742990009c0170c00e47633380be1e356cd0c00a9a00078f3f8005a48032b680388c121a29ada18418481b298a0c0880038e5a089d8c1b8a03003d20484fafa324401b988c04761898542280131a8c1d5ebe801088106280030c18d74c17428c3eb60a1418675ab54d6328a2cc0a22802c98c8d8575d57400488cc8cc019b6126298381a02996acd7088a6f6c28ec758ca89cab0000b40046001d303c620d040139a130a86c2a6980e8c181000e6018cc160e854cf11d30b02006cc06c78ca680984523ada1248ca1c0ca743011d164b264085fa99016898001587980be6d34cbcbe4c0d142e385d9e7c57995ea6217a30caba0332a02c15084460e05331966f602214ece93016400924d111d524ef1822d240810271b8306c0401d2018061b0b0474c1a231000d2cdb0c0308c18022303dd60092d83c60977b20762d918298fd50730c19d6e28cba72e6209a1ca951e1cafc8aa69a05a6d658cd7a0641b0c14fb298a93b333982c960a69b2ab46f0faedf6871531cfee72b8dd4c770793c877e0da473edf5fbfc8164fa4e2e1ccbdd2251e8cc6a3c1549465f09249dc522f2cda662194cb66b23a1cae4f3f982e151345fc894a577d675b8142414c3611e594d615515559ca510241f1ca161d85747818068320681c270800940a600a021098000c541371cd340ec12018441500c0707c060678c8001b8682000)
**Expected behavior**
- the text color of the link should inherit the one from the enclosing element, as how browser CSS handle it [(see standard)](https://www.w3.org/TR/css-cascade-3/#inherit)
- the color of the SVG should inherit from the parent node [(see standard)](https://www.w3.org/TR/SVG11/painting.html#FillProperty)
**Desktop (please complete the following information):**
- OS: Windows
- Browser Node
- React-pdf version v2.1.1
Contributor guide
Assessment
This issue has not been assessed yet.