如何在 Material ui 中使用 mailto？

Question

试图找到如何在 Material UI 中使用 mailto。我尝试在 ListItem 中使用一个简单的标签，我尝试使用

<ListItem button component={Link} mailto='' />

我也尝试过

<ListItem button >
   <i class="material-icons mail_outline">mail_outline</i>
   <ListItemText primary="Support" />
  <a href="mailto:name@email.com"></a>
</ListItem>

我试图在material-UI 的网站和Github 上找到有关此内容的信息，但一无所获。我真的很感激一些帮助。

Answer 1

我的答案基于@Gary Vernon Grubb 的答案，并将其添加到一个按钮中。

<Button
   variant="contained"
   size="large"
   color="primary"
   target="_top"
   rel="noopener noreferrer"
   href={`mailto:test@example.com`}
>
   <Typography variant="button" style={{ fontSize: '0.69rem' }}>
      Send Documents
   </Typography>
</Button>

Answer 2

如果将组件设置为等于a（超链接标记），则可以使用该href属性来设置电子邮件。

因此，您将得到以下行。

<ListItem button key="Email" component="a" href="mailto:name@email.com">

Answer 3

Mailto 是电子邮件地址的统一资源标识符 (URI) 方案。它用于在网站上生成超链接，允许用户将电子邮件发送到特定地址，而无需先复制电子邮件并将其输入电子邮件客户端。

<ListItem>
   <a href="mailto:someone@example.com" target="_top">Send Mail</a>
</ListItem>

上面的代码在包含 Material-UI 库的 ReactJs 中对我来说效果很好。