How to style p tags inside a blockquote with react-native-render-html?

165 Views Asked by At

I'm rendering the following source html using react-native-render-html:

<blockquote><p>HELLO WORLD</p><p>HELLO WORLD</p></blockquote>

I'd like to be able to style the <p> tag to be italic but I can't work out how to do this without editing the source html which I don't want to do.

I've tried adding the following to the themeStyle attribute which didn't work:

{
   blockquote: {fontStyle:'italic'}
}

I also tried creating a custom renderer but couldn't work out how to apply a style to the child <p> tags.

function CustomBlockquoteRenderer(props) {
    let { Renderer, rendererProps } = useInternalRenderer('blockquote', props);

    // how to I edit the P tag styles inside here?

    return (
        <View style={tw`relative`}>
            <LinearGradientComponent
                style={tw`absolute top-0 bottom-0 left-0 w-2`}
            />
            <Renderer {...rendererProps} />
        </View>
    );
}

Any help would be greatly appreciated!

0

There are 0 best solutions below