Style tnode.children with React Native Render HTML custom rendering?-CodePudding

I want to add a strike-through decoration to the #text-node-like children of a particular item we render using custom rendering.

But I'm not aware of any way to actually target the child #text-like-node and apply styles to it.

For example, we could wrap the TChildrenRenderer like below, but those styles will not be inherited by the Text component that TChildrenRenderer renders. So this works for some styles, like lineDecorationType: 'line-through', but not for things like color.

<Text style={{ color: 'red' }}>
    <TChildrenRenderer tchildren={tnode.children} />
</Text>

Is there any approach that would allow us to set color on the inner rendered text?

Edit: The method has to allow for conditional styling, so a top-level prop like defaultTextProps is out.

CodePudding user response：

I think you can add textProps but only on the parent TDefaultRenderer. May be good enough in your use case (?).

<TDefaultRenderer textProps={{ style: { color: 'red' }}}

Or possibly, on <RenderHtml> add defaultTextProps={{ style: { color: 'red' }}}

CodePudding user response：

You could use renderChild prop from TChildrenRendererProps. Something like:

const renderRedChild = ({ childElement }) => React.cloneElement(childElement, {...childElement.props, style: [childElement.props.style, { color: "red" }]})
//...
<TChildrenRenderer tchildren={tnode.children} renderChild={renderRedChild} />