Zenn
📩

MUIでメールリンクを作成する方法

2024/03/28に公開
React
mui
tech

muiでメールのリンクを作る方法がわからなかったので、調べてみた。
以外と簡単だったので、メモしておく。

実装方法

import React from 'react';
import { Link } from '@mui/material';

<Link href="mailto:ここにメールアドレスを記載">Send Email</Link>

生成されるHTML

<a class="muiのclassたち(長いので省略)" href="mailto:ここにメールアドレスを記載">
  Send Email
</a>

MDN によるhref属性の説明

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

ページの節を示すフラグメント URL

  • テキストフラグメントで指定されたテキストの部分
  • メディアファイルの一部を示すメディアフラグメント
  • 電話番号を示す tel: URL
  • メールアドレスを示す mailto: URL
  • SMS テキストメッセージを示す sms: URL
  • ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは > registerProtocolHandler() を使用することができます。

まとめ

MUIのLinkコンポーネントはaタグをラップしたものだから、aタグに使えるhrefが使えて、hrefは電話番号とかSMSとかのリンクにするprefixがあって便利だねって話だった。
Linkに限らず、component propsにaタグを追加すると、aタグとしてレンダリングされると思うので、他のコンポーネントでもhrefが使えるはず

Discussion