Render a <Text> as <p> with fluent ui react

Question

I would like to be able to render the ms fluent-ui as a paragraph instead of the default span for accessibility reasons but the documentation is very unclear on what exact input is expected and in what format. I would expect something like this:

<Text as={<p />}>
  test
</Text>

or:

<Text as={(someProps) => <p>{someProps}</p>}>
  test
</Text>

Can anyone help me out with how this is supposed to be done?

Answer 1

You are on the right path with second example. The problem is you need React Component instead to return directly <p> tag.

// Custom Paragraph Component
const Paragraph = ({ children }) => <p>{children}</p>

<Text as={Paragraph}>Test</Text>

Codepen working example.