0

Is there any way to wrap different MDX elements like ol or li in MUI components to get the MUI theme styles? The MDX gives out plain HTML without any styles;

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

MUI does have a <List> component, but I just want the font to match the

which can be done by wrapping <li> in <Typography> like

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

Right now my MDX component looks like

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

Is there any weird map method to wrap all items of a list in a custom component or is there an easy way to wrap all text in <Typography>? I'm trying to minimize most possible code from .md files.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Akshay K Nair
  • 1,107
  • 16
  • 29

1 Answers1

0

After some time, solved it using props.

 <MDXRemote {...source} components={{
            ol: (props:any) => <Typography gutterBottom component="ol">{props.children}</Typography>,
          }} />
Akshay K Nair
  • 1,107
  • 16
  • 29