In my React project, I have a third-party pre-compiler which generate multiple <p>
elements based on markdown input. Now, I wish to add some custom content at the beginning of the first paragraph, but this is not supported by the third-party content provider. I want to know whether there is a method of inserting into a child component (or at least imitate the appearance using CSS).
For example, I want to implement a component that displays the following
Remark 1: markdown content goes here...
where I am provided with a third-party component <Markdown />
that renders the markdown content in an array of <p>
tags.
I do not want to use the CSS ::before
pseudo-element, because I want to use React to manage the content being inserted, instead of writing it as a raw string in the content
CSS property.
I am currently thinking of using a React Portal to render the extra text into a <span>
tag outside the DOM and insert it into the first <p>
tag I find when my component mounts. However, I am not sure whether there are better methods to implement this.