Customizing components

Using MDX, you can replace every HTML element that Markdown renders with a custom implementation. This allows you to use a set of design system components when rendering.

// src/components/layout.js
import { MDXProvider } from "@mdx-js/tag";
import * as DesignSystem from "your-design-system";
export default function Layout({ children }) {
return (
<MDXProvider
components={{
// Map HTML element tag to React component
h1: DesignSystem.H1,
h2: DesignSystem.H2,
h3: DesignSystem.H3,
// Or define component inline
p: props => <p {...props} style={{ color: "rebeccapurple" }} />
}}
>
{children}
</MDXProvider>
);
}

The following components can be customized with the MDXProvider:

TagNameSyntax
pParagraph
h1Heading 1#
h2Heading 2##
h3Heading 3###
h4Heading 4####
h5Heading 5#####
h6Heading 6######
thematicBreakThematic break***
blockquoteBlockquote>
ulList-
olOrdered list1.
liList item
tableTable--- | --- | ---
trTable rowThis | is | a | table row
td/thTable cell
prePre
codeCode
emEmphasis_emphasis_
strongStrong**strong**
deleteDelete~~strikethrough~~
codeInlineCode
hrBreak---
aLink<https://mdxjs.com> or [MDX](https://mdxjs.com)
imgImage![alt](https://mdx-logo.now.sh)

Related

edit this page on GitHub