Raw html in mdx files doesn't defer rendering to _components

[zachkirsch]

I have an MDX file that looks something like this:

Hello

<p>Goodbye</p>

However, when I serialize the mdx content, only the Hello calls into the p component. The Goodbye just renders the default "p".

function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p"
  }, _provideComponents(), props.components);

...

}, this), "\n", _jsxDEV(_components.p, {
      children: "Hello"
    }

...

}, this), "\n", _jsxDEV("p", { // <-- I want this to be _components.p
      children: "Goodbye"
    }

Is this a bug or expected behavior? Is there a config to get the p tags to call into the component?

Thanks!

[wooorm]

Correct, “normal” components you write in MDX can’t be swapped. You should be able to find more issues discussing this. That’s because JSX already has a mechanism for that: Use a capital (the actual rules are more complex):

<P>Something wrapped in my fancy P component</P>

Whereas, if we would do what you want, it would be hard/weird to not swap components. Sometimes people want to use their own MyHeadingComponent for # this but not for <h1>this</h1>.

Some more info in the Components section in the docs!

[jzxhuang]

@wooorm I have a follow up to this: let's say I needed to map p to components.p (and in all other cases too), because my markdown is being auto-generated by a different program that I don't have control over. Is there an easy way to do this? thanks so much

[ChristianMurphy]

@jzxhuang if your need to customize or rewrite content, check out the guide on extending mdx https://mdxjs.com/docs/extending-mdx/#extending-mdx
remca plugins allow you to adjust the output JavaScript in any way you need, including mapping plain HTML to custom components.
https://unifiedjs.com/learn/ offer an introduction to working with ASTs and plugins, the extending MDX guide also include examples of plugins that you could draw inspiration from https://mdxjs.com/docs/extending-mdx/#list-of-plugins

[zachkirsch]

Amazing thanks so much!