Unable to customize Markdown elements in MDX using MDXProvider and MDXRenderer

[wyattlefevre]

Hello,

I am trying to map markdown elements in my MDX files to use my own custom components. I tried to follow this guide but I'm not having any luck. None of the custom components are working for me. Everything is still using the default styling. The MDXProvider doesn't seem to want to map the markdown components to my own react components or even the p-tag they use in the guide. Here's my code:

// {mdx.slug}.js
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../../components/Layout"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { MDXProvider } from "@mdx-js/tag"
import ProgressiveImage from "../../components/ProgressiveImage"
import * as DesignSystem from "../../components/mdx/index"

const BlogPost = ({ data }) => {
  return (
    <Layout pageTitle={data.mdx.frontmatter.title} path="/blog">
      {data.mdx.frontmatter.hero_image && (
        <ProgressiveImage
          placeholderSrc={data.mdx.frontmatter.hero_image_pre}
          fullImageSrc={data.mdx.frontmatter.hero_image}
          width="100%"
        />
      )}
      <p>{data.mdx.frontmatter.date}</p>
      <DesignSystem.H1>this is a test</DesignSystem.H1>
      <MDXProvider
        components={{
          // Map HTML element tag to React component
          h1: DesignSystem.H1,
          // Or define component inline
          p: props => <p {...props} style={{ color: "rebeccapurple" }} />,
        }}
      >
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </MDXProvider>
    </Layout>
  )
}
export const query = graphql`
  query ($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
        hero_image
        hero_image_pre
      }
      body
    }
  }
`
export default BlogPost

this is the H1 component I'm trying to use

import { Typography } from "@mui/material"
import React from "react"

const H1 = ({ children }) => {
  return (
    <Typography variant="body1" sx={{ color: "blue" }}>
      {children}
    </Typography>
  )
}

export default H1

Any ideas for what might be going wrong here would be much appreciated!

[wyattlefevre]

Alright, I think I've found the answer. I changed my import statement from

import { MDXProvider } from "@mdx-js/tag"

to

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

and it seemed to fix the problem. Good luck to anyone else who runs into this issue!