Gatsby Theme Aoi のコンポーネントを使う

Gatsby Theme Aoi では MUI ベースで作成されたコンポーネント (Aoi コンポーネント) を利用できます。 Aoi コンポーネントには、MUI の Link コンポーネントである MuiLink に Gatsby Link コンポーネントを実装した AppLink などがあります。

使い方

Aoi コンポーネントも Aoi レイアウトと同様に @cieloazul310/gatsby-theme-aoi からインポートできます。

embed:ExampleCode-1.tsx

API リファレンスへ

AppLink コンポーネント

embed:ExampleCode-2.tsx

上のデモページでは、Gatsby Link, MuiLink, AppLink のスタイリングと動作を検証できます。

AppLink は Gatsby Link に MuiLink コンポーネントを合成したものです。通常、Gatsby サイト内でのページ遷移は <a> タグではなく Gatsby Link を使います。Gatsby Link の機能で Gatsby サイト内での高速なページ遷移が可能になります。

Gatsby Theme Aoi の制作にあたって参考にしてきた Gatsby + MUI のプロジェクトでは必ず Gatsby Link と MUI Link を合成したコンポーネントを作成しています。