How to Globally override HTML element with components?

[harleylara]

Hi community,

I'm building a personal site using MDX integration with Astro,

I would like to globally replace some HTML elements like p ul ol pre etc. Currently I need to import and export all the components in every MDX file:

import H1 from '../components/H1.astro'
import H2 from '../components/H2.astro'
import H3 from '../components/H3.astro'
import P from '../components/P.astro'
import Ul from '../components/Ul.astro'
import Ol from '../components/Ol.astro'
import Pre from '../components/Pre.astro'
// ... more components

// this is the only way I know to replace them 
// but I need to do it for every file
export const components = {
    h1: H1
    h2: H2
    h3: H3
    p: P
    ul: Ul
    ol: Ol
    pre: Pre
    // more replacement
}

# This is just a example

Defining some content in MDX as markdown syntax.
- With some elements

I was wondering if there is a better way to do this, one where I can avoid having to import and export for each file?

[wooorm]

Hey!

a) A solution likely relates more to your framework, so best to ask Astro folks.
b) export const components is not an MDX thing, if that works, that’s Astro
c) In MDX, you can pass components to components: https://mdxjs.com/docs/using-mdx/. See particularly the section on “Components”

[harleylara]

Thanks @wooorm for your answer. If I get a solution for this from Astro folks I'll share it here in case another user around these meadows needs it. ✌️

[rubennaatje]

@harleylara ever found a solution?

[kitschpatrol]

Take a look at https://astro-m2dx.netlify.app

[harleylara]

@rubennaatje there is a solution... check https://stackblitz.com/edit/github-xeh37a?file=src%2Fcomponents%2FHeadingH2.astro,src%2Fpages%2Fblog%2F[...slug].astro&on=stackblitz

The official documentation on Custom components with imported MDX