`MDXCreateElement` not using the `components` mapping prop in v1.4.5

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.

[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>
)

[wooorm]

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