如何在MDX与MUI ( <ol> )一起使用时用<Typography>包装不同的组件(NextJS)

Question

是否有方法将不同的MDX元素(如ol或li )包装在MUI组件中以获得MUI主题样式？MDX提供没有任何样式的普通HTML；

<ol>
   <li>One</li>
</ol>

MUI确实有一个<List>组件，但我只想让字体与

这可以通过在<li>中封装<Typography>来实现

<ol>
   <li><Typography>One</Typography></li>
</ol>

现在，我的MDX组件看起来像

<MDXRemote {...source} components={{
    wrapper: Container, 
    p:Typography
  }} 
/>

是否有任何奇怪的映射方法可以在自定义组件中包装列表中的所有项，或者是否有一种简单的方法来包装<Typography>中的所有文本？我正在尽量减少来自.md文件的大多数可能的代码。

Answer 1

过了一段时间，用props解决了这个问题。

 <MDXRemote {...source} components={{
            ol: (props:any) => <Typography gutterBottom component="ol">{props.children}</Typography>,
          }} />