Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update MDX Custom Elements setup #34175

Merged
merged 3 commits into from
Feb 14, 2022
Merged

Update MDX Custom Elements setup #34175

merged 3 commits into from
Feb 14, 2022

Conversation

dburrows
Copy link
Contributor

@dburrows dburrows commented Feb 10, 2022

The current documentation for MDX Custom Element setup was not clear, ended up on #30812 before I had this configured correctly, have tried to make the config steps more explicit.

Documentation / Examples

  • Make sure the linting passes by running yarn lint

The current documentation was not clear, ended up on vercel#30812 before I had this configured correctly, have tried to make the config steps more explicit.
@@ -155,7 +155,23 @@ The above generates the following `HTML`:
</ul>
```

When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name. You also need to specify `providerImportSource: "@mdx-js/react"` in `next.config.js`.
When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could mention that in mdx v2 there's no need for a provider, i.e. it is possible to pass a components prop directly, see https://mdxjs.com/docs/using-mdx/#components

Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@kodiakhq kodiakhq bot merged commit 5402f09 into vercel:canary Feb 14, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants