Question

尝试在材质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

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

因此，您将获得以下行。

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

Answer 2

这就是我使用material-ui的方法：

    <FormControlLabel
        control={
            <a target="_top"
                rel="noopener noreferrer"
                href="mailto:test@example.com">
                <IconButton color="primary">
                    <EmailOutline /> {/* icon */}
                </IconButton>
            </a>
        }
        label={"test@example.com"}
        labelPlacement="end"
    />

Answer 3

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

    <Button
                                    variant="contained"
                                    size="large"
                                    color="primary"
                                    className={isMobile ? classes.sendDocumentsMobile : classes.sendDocuments}
                                    target="_top"
                                    rel="noopener noreferrer"
                                    href={`mailto:test@example.com?subject=Subject&body=${emailBody}`}
                                >
                                    <Typography variant="button" style={{ fontSize: '0.69rem' }}>
                                        Send Documents
                                    </Typography>
                                </Button>

Answer 4

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

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

上面的代码适用于包含Material-UI库的ReactJs。

如何使用材料ui的mailto？

4 个答案: