Components Within MDX Files

Introduction

Sometimes the native components of Docusaurus might not be enough. In this case, you can customize some components to add more styles to your pages.

Implementing Components

To customize a component within MDX files, add the implementation code to the beginning of the file (below the YAML headers, if any).

This snippet customizes a Background component, which renders the content wrapped in the component with the specified color:

export const Background = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

备注

Only paragraphs that start with export will be parsed as components instead of prose.

children is the content wrapped in the component (<Background>children</Background>.

Using Components

Use the component as follows:

<Background color="#25c2a0">Green</Background> and <Background color="#1877F2">blue</Background> are my favorite colors.

It looks like this:

Green and blue are my favorite colors.

References

• Using JSX in Markdown
• Swizzling