gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

[gatsby-plugin-mdx] <MDXRenderer /> components prop does not work #25136

Closed hjfitz closed 4 years ago

hjfitz commented 4 years ago

Description

When passing components to <MDXRenderer /> , those components are ignored

Steps to reproduce

I'm using an exported pageQuery to pull in mdx:

  query PageQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      frontmatter {
        title
    date
      }
    }
  }

and trying to render this with a wrapper function:

import React from 'react'
import {MDXRenderer} from 'gatsby-plugin-mdx'

const P = (props) => <p className="" {...props} />

const H1 = (props) => <h1 {...props} className="text-4xl" />

const components = {
  p: P,
  h1: H1,
}

const wrapper = (children) => <MDXRenderer components={components}>{children}</MDXRenderer>

export default wrapper

Expected result

What should happen?

My <h1 /> should have the class text-4xl

Actual result

What happened.

It doesn't.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-4600U CPU @ 2.10GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.0.0 - /tmp/yarn--1592602248793-0.4741856971078775/node
    Yarn: 1.22.4 - /tmp/yarn--1592602248793-0.4741856971078775/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.0.0/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Firefox: 76.0.1
  npmPackages:
    gatsby: ^2.15.28 => 2.15.28 
    gatsby-image: ^2.2.23 => 2.2.23 
    gatsby-plugin-manifest: ^2.2.20 => 2.2.20 
    gatsby-plugin-mdx: ^1.0.46 => 1.2.16 
    gatsby-plugin-offline: ^3.0.11 => 3.0.11 
    gatsby-plugin-postcss: ^2.3.4 => 2.3.4 
    gatsby-plugin-react-helmet: ^3.1.10 => 3.1.10 
    gatsby-plugin-sass: ^2.1.17 => 2.1.17 
    gatsby-plugin-sharp: ^2.2.27 => 2.2.27 
    gatsby-remark-images: ^3.1.25 => 3.1.25 
    gatsby-remark-prismjs: ^3.3.24 => 3.3.24 
    gatsby-remark-smartypants: ^2.1.16 => 2.1.16 
    gatsby-source-filesystem: ^2.1.28 => 2.1.28 
    gatsby-transformer-sharp: ^2.2.19 => 2.2.19 
hjfitz commented 4 years ago

mdx file didn't have any \

tags. Goddamn I'm tired. Sorry guys