react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

CSS inheritance

Open nowtryz opened this issue 3 years ago • 3 comments

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:

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>
)

repl

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

nowtryz avatar Feb 03 '22 16:02 nowtryz

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

nowtryz avatar Feb 03 '22 16:02 nowtryz

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

imatwork avatar Aug 23 '22 19:08 imatwork

Hi @diegomura, The issue is still present in the latest version.

nowtryz avatar May 17 '24 10:05 nowtryz