Next.js中MUI结合MDX使用时如何用Typography包裹ol/li等元素

完全可以通过MDX原生的组件映射机制实现需求，不需要在.mdx/.md文件中编写任何冗余的自定义组件代码，以下是两种可直接落地的实现方式：

方案1：直接映射列表标签（最简实现，适合大多数场景） #

MDX渲染时会自动把原生HTML标签匹配到你传入的components配置中对应键名的组件，你只需要给li标签写一个自定义映射，自动把内容包裹在Typography中即可，不需要修改任何markdown内容：

<MDXRemote {...source} components={{
    wrapper: Container, 
    p: Typography,
    // 保留ol/ul原生语义，补充基础间距即可，不需要额外套MUI List组件
    ol: (props) => <ol style={{ margin: '1rem 0', paddingLeft: '2rem' }} {...props} />,
    ul: (props) => <ul style={{ margin: '1rem 0', paddingLeft: '2rem' }} {...props} />,
    // 核心配置：所有li内容自动包裹Typography，和p标签样式统一
    li: (props) => (
      <li style={{ margin: '0.5rem 0' }}>
        {/* 用component="span"避免Typography默认渲染p标签造成的嵌套块级元素布局异常 */}
        <Typography component="span">{props.children}</Typography>
      </li>
    )
}} />

这个方案的渲染结果和你手动在每个li里写Typography完全一致，列表的原生序号、项目符号功能完全保留，字体、行高、文字颜色会自动继承MUI主题配置，和p标签样式完全对齐。

方案2：通用高阶函数批量包装（适合多文本元素统一处理的场景） #

如果你后续还需要给表格单元格、引用块等其他文本类元素统一包裹Typography，可以写一个通用的高阶包装函数，避免重复写相同的包裹逻辑：

// 通用包装工具：给传入的原生标签自动包裹Typography
const wrapWithTypography = (HtmlTag) => (props) => {
  // 预留跳过逻辑：给元素加no-typography类名即可跳过自动包裹，适配特殊内容场景
  if (props.className?.includes('no-typography')) {
    return <HtmlTag {...props} />
  }
  return (
    <HtmlTag {...props}>
      <Typography component="span">{props.children}</Typography>
    </HtmlTag>
  )
}

// MDX配置中直接复用
<MDXRemote {...source} components={{
    wrapper: Container, 
    p: Typography,
    ol: (props) => <ol style={{ margin: '1rem 0', paddingLeft: '2rem' }} {...props} />,
    ul: (props) => <ul style={{ margin: '1rem 0', paddingLeft: '2rem' }} {...props} />,
    li: wrapWithTypography('li'),
    blockquote: wrapWithTypography('blockquote'), // 引用块自动套用样式
    td: wrapWithTypography('td'), // 表格单元格自动套用样式
    th: wrapWithTypography('th'),
}} />

你可以把这份components配置抽成项目公共常量，所有用到MDX渲染的地方直接引入复用，不需要重复编写配置。

注意事项 #

• 包裹li内容时Typography要设置component="span"，因为Typography默认渲染p标签，属于块级元素，嵌套在li中会破坏原生列表的布局结构，用span作为渲染节点既可以继承Typography的文本样式，又不会干扰原生列表语义。
• 如果列表项中嵌套了代码块、图片等非文本内容，span包裹的形式不会影响这类块级元素的正常渲染，不需要额外做特殊处理。

内容的提问来源于stack exchange，提问作者Akshay K Nair