Typography Markdown support?

Context

• So I was looking into various implementations of the Typography component.
• And I saw that it’s a bit troublesome to manually add many Typography components with props you want to put in, such as variant prop.
• So I’m suggesting: why not put enable markdown prop (and some supplementary props) on Typography component and let it render the markdown with all kinds of headings and variants?

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

Currently, you’ve gotta do something like:

<Typography variant="headline" gutterBottom color = "primary" align = "center">
        Explanation of the problem
</Typography>
<Typography variant="subheading" gutterBottom color = "primary">
        So what Im tyring to explain is
</Typography>
<Typography variant="body1" gutterBottom color = "primary">
        The detail, right. Youve gotta write repeated pattern of codes. 
</Typography>

If you are writing generic texts.

Suggestion

Instead of writing Typography components all over, can’t we do something like:

const content = `# Explanation of the problem
## So what I'm trying to explain is
The detail, right. You've gotta write repeated pattern of codes.`

<Typography markdown={content} option ={{
              all: {
                gutterBottom: true,
                color: 'primary'
              },
              h1: { // this h1 could be something like 'headline' as well, depends on naming.
                align: 'center'
              }
            }} />

• Then, it would the render the same thing as the example in the Current Behavior section.
• What we can do right now with Typography is a real pain if you are trying to write many texts with various props and heading types.
• In contrast, markdown makes it easy to keep and see what you are writing as well, and doing so also separates the content from the props, which makes it easy to digest your codes when you are reading them.

Thanks!

[oliviertassinari]

@benshanahan1 We have added a Markdown demo in the repository. You can find the source: https://github.com/mui/material-ui/blob/3f8c1a43e67e8337639024efaa70ac616ee5bbd9/docs/src/pages/premium-themes/onepirate/modules/components/Markdown.tsx#L48 It’s using markdown-to-jsx over react-markdown as it’s faster and lighter.

Alternatively, if you really need performance, you would need to use a pure HTML approach, it’s what we do for the docs:

https://github.com/mui/material-ui/blob/3f8c1a43e67e8337639024efaa70ac616ee5bbd9/docs/src/modules/components/MarkdownElement.js#L572

[alecananian]

For those sticking with react-markdown, you’ll need to use the renderers property to override elements. Example using the material-ui Typography component for paragraphs:

<ReactMarkdown
  source={text}
  renderers={{ paragraph: Typography }}
/>

or if you need to apply additional props to Typography:

<ReactMarkdown
  source={text}
  renderers={{
    paragraph: ({ children }) => (
      <Typography>
        {children}
      </Typography>
    ),
  }}
/>

The full list of overridable renderers is available in the Node types section of the documentation.