ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。（独自コンポーネント）

はじめに

環境

• react-markdown: 9.0.1

ReactMarkdownでLinkや見出しにスタイルを適用する

以下のように、componentsに構造を定義することで、
独自な要素のスタイルなどを適用できます。

import ReactMarkdown from "react-markdown";
const MarkDown = () => {
 const components = {
  h1: ({...props})=><h1 className="text-blue-700">{props.children}</h1>,
 }
 return (
  <ReactMarkdown components={components}>{"# hello"}</ReactMarkdown>
 )
}

上記は、h1タグを青色（Tailwind.css使用）にしています。

brcodeemh1h2h3h4h5h6hrimgliolpprestrongulremark-gfmdelinputtabletbodytdththeadtrreact-markdownをサポートしています。

文献

https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-b-components