1import {styled} from '@mui/material/styles';
 2import Typography, {TypographyProps} from '@mui/material/Typography';
 3import {marked} from 'marked';
 4
 5const Markdown = (props: TypographyProps) => {
 6  const {children, ...typographyProps} = props;
 7
 8  if (!children) return null;
 9
10  const htmlContent = marked(children).replace(/\<\/?p\>/g, '');
11
12  return (
13    <Text
14      {...typographyProps}
15      dangerouslySetInnerHTML={{
16        __html: htmlContent,
17      }}
18    />
19  );
20};
21
22const Text = styled(Typography)(({theme}) => ({
23  '& > *:first-child': {
24    marginTop: 0,
25  },
26}));
27
28export default Markdown;