CSS inheritance
Describe the bug In some cases, color is not inherited:
- explicit inheritance for links, using
{color: 'inherit'}in the style prop of aLinkelement - in SVG, when the
fillattribute (of apathfor example) is not given, the shape should appear black or inherit from the parent text color. But inreact-pdf, the SVG appears transparent except if the filling is explicitly set.
To Reproduce Here are examples showcasing what I'm saying
Link color:
const EmbdedLink = () => (
<View style={{color: 'blue'}}>
<Text>I want this text and the following link to be blue</Text>
<Link src="https://react-pdf.org/" style={{color: 'inherit'}}>Link</Link>
</View>
)
In this case, the inherit CSS value seems not to have been implemented yet. The render causes a type error
(see repl)
SVG filling:
const Mail = ({style}) => (
<Svg height="24" viewBox="0 0 24 24" width="24" style={style}>
<Path d="M0 0h24v24H0z" fill="none"/>
<Path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
</Svg>
)
Expected behavior
- the text color of the link should inherit the one from the enclosing element, as how browser CSS handle it (see standard)
- the color of the SVG should inherit from the parent node (see standard)
Desktop (please complete the following information):
- OS: Windows
- Browser Node
- React-pdf version v2.1.1
As I'm not familiar with react-pdf works internally, I may need some explanations but I would be glad to propose a marge request
I believe cascading SVG color is normally done with fill="currentColor", which is something that would be nice to support. I actually need this feature in my current project but just set the color explicitly for now
Hi @diegomura, The issue is still present in the latest version.