search

mdx-js / mdx

Markdown for the component era
https://mdxjs.com
MIT License
17.71k stars 1.14k forks source link

MDXProvider not accepting components in 1.4.4 #768

Closed lannonbr closed 5 years ago

lannonbr commented 5 years ago

Subject of the issue

So as of the latest version, the MDXProvider component is not applying components that are passed into it through the components prop.

Your environment

Steps to reproduce

Repro: https://github.com/lannonbr/MDXProvider-bug-repro

The repo is a fresh gatsby new of the blog theme starter. Then I added a gatsby-browser.js to add the component as such:

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

export const wrapRootElement = ({ element }) => {
  return (
    <MDXProvider
      components={{
        h1: ({ children }) => <h4 style={{ color: "red" }}>{children}</h4>,
      }}
    >
      {element}
    </MDXProvider>
  )
}

Expected behaviour

Should switch all <h1> tags to <h4> with red text

Actual behaviour

Absolutely nothing. the provider doesn't seem to applying the new components.

johno commented 5 years ago

Thanks for opening an issue and creating a repro!

When I swap wrapRootElement with wrapPageElement it works. I suspect this has to do with gatsby-plugin-theme-ui overriding at the root level as well so the component isn't being rendered (since Theme UI will also create an h1 and add to context).

At the very least this doesn't seem to be a bug in MDX core since the provider appears to be working as expected. This seems to be a bug in Gatsby and/or Theme UI because I'd expect the user's gatsby-browser to wrap after a plugin's 🤔.

johno commented 5 years ago

Going to go ahead and close this for now since it isn't MDX core specific and an issue in Gatsby or Theme UI.