Skip to main content

カスタムコンポーネントで Hello World

前提​

2つ方法があるが、ここでは、動作確認できている 1 だけ記載。

  1. tsx として別ファイルに定義し、md ファイルでは import して使う
    • ここでは、この方法を記載
  2. mdx 内に埋め込む
    • コードは ts でなく js にする必要あり
    • 拡張子は md でなく mdx にする必要あり
    • しかし、うまくいっていない。ts モードとの共存がうまくいかない？

呼び出し​

sample.md
import SampleTag from '@site/src/components/SampleTag';

こんにちは！ <SampleTag>カスタムタグの例</SampleTag> を使ってみましょう。

出力​

こんにちは！ カスタムタグの例 を使ってみましょう。

コンポーネントの定義​

src/components/SampleTag.tsx
import React from 'react';

interface SampleTagProps {
  children: React.ReactNode;
}

const SampleTag: React.FC<SampleTagProps> = ({ children }) => {
  return (
    <span style={{ color: 'red', fontWeight: 'bold', border: 'solid 1px', padding: '5px' }}>
      {children}
    </span>
  );
};

export default SampleTag;

補足: style 指定について​

tsx
<span style={{ backgroundColor: '#e0f7fa', padding: '2px 6px', borderRadius: '4px' }}>

→ "..." ではなく {{ ... }} である点に注意

もし {{}} を使わず、style="..." のように書こうとすると、
文字列として処理されてしまい、React の style 属性として適切に動作しません。

らしい