No way to know if a component is JSX or MDX in MDXProvider
See original GitHub issueVersion 1.0 includes a change:
The pragma implementation will also cause JSX HTML elements to be rendered with the component mapping passed to
MDXProvider
.
It seems to be difficult (or impossible?) to opt-out of this behavior and render the JSX differently than the MDX equivalent of that HTML tag.
A real example of how this would be helpful
I’m building out this page in MDX:
The legend, in particular, looks like this:
I’ve built the legend in the MDX file with:
<ul className="...">
<li className="">...</li>
<li className="">...</li>
<li className="">...</li>
<li className="">...</li>
</ul>
I want the <ul>
and <li>
s to look different than a <ul>
created with:
* This `<ul>`
* should render with
* three bullet points
When I use custom components in MDXProvider
, there seems to be no way to distinguish between a ul
created with JSX and a ul
created with MDX:
<MDXProvider
components={{
ul: (props) => {
// How can I tell if this started as JSX or MDX? If it's JSX, I'd like to
// return early and just do `<ul {...props} />`.
},
}}
>
{children}
</MDXProvider>
Your environment
@mdx-js/mdx@1.0.15
,@mdx-js/react@1.0.15
, andgatsby-mdx@0.6.3
.
Steps to reproduce
N/A
(Happy to make one if the issue needs clarification.)
Expected behaviour
N/A
Actual behaviour
N/A
I hope this question made sense. I’m having trouble phrasing it but am happy to elaborate more if it’s confusing. Thanks for all the work you all have done! 🙇
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (6 by maintainers)
Top GitHub Comments
Yeah, this is something that we need to be able to solve so I’m going to leave this open while I ponder the best solution or at least better document things.
It’s definitely been a source of confusion where some folks expect HTML to maintain the same styles/component rendering as their Markdown equivalent while others don’t. 🤷♂
As I believe https://github.com/mdx-js/mdx/issues/821 solves this, and is closed and in MDX@2, I’ll close this here too