markdown-to-jsx不接收源内容，配合MUI博客模板调用报错如何解决？

根本原因定位 #

该报错核心是版本不兼容问题：当前create-react-app默认创建React18+项目，而MUI官方仓库提供的博客模板中Markdown组件的封装逻辑、依赖的markdown-to-jsx版本均适配的是旧版React，语法兼容出现冲突就会触发该类型错误。

可直接落地的解决步骤 #

• 第一步：卸载现有不兼容依赖，安装验证过的稳定版本
  执行命令：

  npm uninstall markdown-to-jsx && npm install markdown-to-jsx@7.2.1
  

  若你使用的是MUI v5版本，需要额外安装样式依赖：

  npm install @mui/styles @emotion/react @emotion/styled
  

• 第二步：重写本地Markdown组件，不要直接拷贝MUI仓库的旧版本封装，替换为以下兼容代码：

  import * as React from 'react';
  import ReactMarkdown from 'markdown-to-jsx';
  import Typography from '@mui/material/Typography';
  import Link from '@mui/material/Link';
  import { makeStyles } from '@mui/styles';
  
  const useStyles = makeStyles((theme) => ({
    markdown: {
      '& > p': {
        ...theme.typography.body1,
        marginBottom: theme.spacing(2),
      },
      '& > a': {
        color: theme.palette.primary.main,
      },
      // 可自行补充其他需要的样式规则
    },
  }));
  
  const options = {
    overrides: {
      h1: { component: Typography, props: { gutterBottom: true, variant: 'h4', component: 'h1' } },
      h2: { component: Typography, props: { gutterBottom: true, variant: 'h5', component: 'h2' } },
      h3: { component: Typography, props: { gutterBottom: true, variant: 'h6', component: 'h3' } },
      h4: { component: Typography, props: { gutterBottom: true, variant: 'subtitle1', component: 'h4' } },
      p: { component: Typography, props: { variant: 'body1', paragraph: true } },
      a: { component: Link },
      // 可自行补充其他需要的标签覆盖规则
    },
  };
  
  export default function Markdown(props) {
    const classes = useStyles();
    return <ReactMarkdown className={classes.markdown} options={options} {...props} />;
  }
  

• 第三步：修正组件调用逻辑，避免空值异常，调用代码替换为：

  {markdown && (
    <Markdown className={classes.markdown} key={markdown ? markdown.substring(0, 40) : 'empty-markdown'}>
      {markdown}
    </Markdown>
  )}
  

• 第四步：全局统一React导入语法，项目所有文件中将import React from 'react'替换为import * as React from 'react'，消除默认导入的兼容隐患。

验证方法 #

重启项目后触发markdown内容加载，即可正常渲染不会抛出类型错误。

内容的提问来源于stack exchange，提问作者Arber Gjonaj