Closed hjfitz closed 4 years ago
When passing components to <MDXRenderer /> , those components are ignored
components
<MDXRenderer />
I'm using an exported pageQuery to pull in mdx:
pageQuery
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
What should happen?
My <h1 /> should have the class text-4xl
<h1 />
text-4xl
What happened.
It doesn't.
Run gatsby info --clipboard in your project directory and paste the output here.
gatsby info --clipboard
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
mdx file didn't have any \
Description
When passing
components
to<MDXRenderer />
, those components are ignoredSteps to reproduce
I'm using an exported
pageQuery
to pull in mdx:and trying to render this with a wrapper function:
Expected result
What should happen?
My
<h1 />
should have the classtext-4xl
Actual result
What happened.
It doesn't.
Environment
Run
gatsby info --clipboard
in your project directory and paste the output here.