How to make Material UI components editable in Sitecore JSS React App?

Question

Since I am using Material UI in my Sitecore JSS app, I wanted to know how can I make Material UI components to make it editable for experience editor?

For example:

How to make the below Material UI component editable like the Sitecore JSS React component?

<Typography variant="h1" component="h1">{fields.heading.value}</Typography>

Default Sitecore JSS React component:

<Text tag="h1" editable="true" field={fields.heading} />

If making the Material UI component editable is not doable then, is there a way to apply Material UI styles to the sitecore components?

Answer 1

How about

<Typography variant="h1" component="h1"><Text tag="span" editable="true" field={fields.heading} /></Typography>