This module creates an MDX components object for use with MDXjs and Material UI.
See the example running here https://dev.joesturge.com/mui-mdx-components.
Intended to be used with react:17+
@mui/material:5
and @mdx-js/mdx:2
.
This module exports a single method components(options)
which is used to create an MDX components object to be passed to an MDXProvider
see: https://mdxjs.com/docs/using-mdx/#mdx-provider
You can optionally pass an options object to the components function:
- overrides - MDXComponents defined here will overwrite the default component
- propOverrides - Used to override the props which are being passed to the default component
- Highlighter - If you wish to use
react-syntax-highlighter
you can pass an implementation for it here and it will be used - highlighterStyle - You can supply the Highlighter with a style here and it will override the highlighter default, this can also be a function which takes the mui
theme
and returns areact-syntax-highlighter
style.
import { MDXProvider } from "@mdx-js/react";
import components from "mui-mdx-components";
import { PrismLight as Highlighter } from "react-syntax-highlighter";
import {
oneDark,
oneLight,
} from "react-syntax-highlighter/dist/esm/styles/prism";
const options = {
overrides: {
h1: CustomElement,
other: (props) => <span>{prop.children}</span>,
},
propOverrides: {
em: {
color: "secondary",
},
},
Highlighter,
highlighterStyle: (theme) =>
theme.palette.mode === "light" ? oneLight : oneDark,
};
export default (props) => (
<MDXProvider components={components(options)}>{props.children}</MDXProvider>
);
πΉ h1
πΉ h2
πΉ h3
πΉ h4
πΉ h5
πΉ h6
πΉ p
πΉ strong
πΉ em
πΉ ul
πΉ ol
πΉ li
πΉ a
πΉ hr
πΉ wrapper
πΉ code
πΉ pre
πΉ blockquote
β del
β input
β section
β sup
β table
β tbody
β td
β th
β thead
β tr