カスタムタグの各 MDX ファイルでの import を毎回書きたくない

設定方法

src/theme/MDXComponents.tsx という名前で、あらかじめ import/export しておけば良い。

このファイルは Docusaurus によって自動的に読み込まれ、MDX から直接使用できるようになる。

src/theme/MDXComponents.tsx

import React from 'react';
import type { MDXComponentsObject } from '@theme/MDXComponents';

import Notice from '@site/src/components/Notice';

const MDXComponents: MDXComponentsObject = {
  ...OriginalMDXComponents, // ← デフォルトを保持
  Notice, // ← カスタム追加
};

export default MDXComponents;

使用箇所

個々の .mdx ファイルでは import 不要で、すぐに使える：

****.md

<Notice>
サンプルです
</Notice>

なぜこのディレクトリ/ファイル名か

• src/theme ディレクトリ : Docusaurus の「テーマ」のカスタマイズ用パスで、標準コンポーネントをオーバーライド可能
• MDXComponents.tsx : カスタム要素を定義するための予約ファイル名。Docusaurus が自動検出してくれる