MDXCreateElement not using the components mapping prop in v1.4.5

[Saw-mon-and-Natalie]

Subject of the issue

MDXCreateElement not using the components mapping prop

When trying to use component mapping following the mdxjs instructions from here, the mapped components' styles don't get rendered.

Your environment

• OS: MacOS 10.13.5
• Packages:
  • "@mdx-js/loader": "1.4.5",
  • "@next/mdx": "9.0.5",
  • "next": "latest",
  • "react": "^16.7.0",
  • "react-dom": "^16.7.0"
• Env:
  • node v12.10.0
  • npm v6.10.3
  • Chrome 76

Steps to reproduce

Repro: https://codesandbox.io/s/nextjs-mdx-js-tnifm

This repro is a fresh install of Next.js with only mdx-js support added.

// source: pages/index.js
import Content from "../content/hello.mdx";

const MyH1 = props => <h1 style={{ color: "tomato" }} {...props} />;
const components = {
  h1: MyH1
};

export default () => <Content components={components} />;

Expected behaviour

The h1 header should have a tomato color.

Actual behaviour

The h1 header renders black.

[mjhenkes]

Do the props passed into the MyH1 component include the style object? That would override the set style.
Try reversing the order like this to test.

const MyH1 = props => <h1 {...props} style={{ color: "tomato" }} />;

[Saw-mon-and-Natalie]

@mjhenkes , No props didn't have any style objects. I reveresed the order as you mentioned and the issue still persist.

Here is a repro from the reversed order:
https://codesandbox.io/s/nextjs-mdx-js-0ygdc

I also tried omitting the {...props} altogether like:

const MyH1 = props => <h1 style={{ color: "tomato" }} />;

and h1 still renders black.

[ghost]

Actually, it doesn't make sense to pass components on the Markdown component. Instead we have to wrap it with the MDXProvider on which we pass components.

This is the good way to do it :

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

import Content from "../content/hello.mdx"

const components = {
  h1:  props => <h1 style={{ color: "tomato" }} {...props} />
}

export default () => (
  <MDXProvider components={components}>
    <Content />
  </MDXProvider>
)

[Saw-mon-and-Natalie]

@funewik, thanks that worked. So the documentation needs to be updated/corrected.

[johno]

Yeah, I think the docs are outdated 😬. Would happily accept a PR!

[wooorm]

Finally fixed btw! Please try out the RC for MDX 2: https://v2.mdxjs.com