ReactMarkdown - Render root element as span in version 6.0.2

[Jerimo17]

Hi,

I struggle to find way how to render root component as span instead div. In previous versions we use renderers
<Markdown renderers={{root: 'span'}} source="Some text">
which render <span>Some text</span>
With version 6, there is change from renderers to components and root component is not supported and should be change to:
**​ Wrap ReactMarkdown in a component instead

Obviously <span><Markdown>Some text</Markdown><span> does not help as it render it as <span><div>Some text</div></span>.

Do you know any solution to this?

Thanks for help.
Andrej

[wooorm]

Where is the div coming from?

Markdown is block: lists, block quotes, pre, p... You might be able to remove some through the built in filter functionality, or use rehype-sanitize which has more fine grained control.

[Jerimo17]

That was quick and it helps :). I use className to set styles. I add className to parent element and it helped!
<span className=".."><Markdown>Blabla</Markdown></span>
work perfect and create what I need.
Thanks

[ChinPTeo]

Context I missed, using classNames adds the div wrapper. So if you have tailwind typography, add className="prose" to the parent of the ReactMarkdown element.