Custom Components

Those familar with MDX may be familiar with the concept of custom components. With MDX, you can create your own components and use them in your markdown files.

Creating a custom component#

Somewhere in your MDX file, add an export which returns a JSX component. For example:

export const BoldText = props => {
  return <span style={{ color: props.color, fontWeight: 'bold' }}>{props.children}</span>;
};

Now within that page, use the component where you like:

Hello there, this is some <BoldText color="red">bold red text</BoldText>!

Using components#

Components have some advantages and disadvantages you can note below.

• Component children also supports other components.

• You can pass props (including other components) to the component.

• You can provide custom CSS styles (in object format).

• You cannot share components across pages.

• You cannot use custom Tailwind class names (since they are not bundled).

Applying your Theme#

You can apply custom classes to elements to style them with your theme. For example:

export const ThemedText = props => {
  return <span class="text-docs-theme">{props.children}</span>;
};

Class names follow the Tailwind naming convention, so you can apply the theme to various properties, such as: