react-email

React Email

概述

React Email 是一个使用 React 组件构建响应式 HTML 邮件的库。它提供了一组无样式、易于访问的组件，可渲染为兼容邮件客户端的 HTML。支持内联样式、通过包装组件使用 Tailwind CSS、自定义 Web 字体，以及渲染为 HTML 和纯文本。

适用场景： 事务性邮件（欢迎邮件、密码重置邮件、收据）、营销模板、邮件设计系统，以及任何在服务器端渲染邮件的项目。

不适用场景： 没有动态内容的静态 HTML 邮件模板、已使用专用邮件构建器（MJML、Maizzle）的项目，或只需要纯文本邮件的情况。

快速参考

模式	API	要点
文档结构	Html, Head, Body	Html 包裹所有内容，Head 加载字体和元数据
内容容器	Container	将内容居中，设置 max-width
布局网格	Section, Row, Column	使用基于表格的布局，适用于邮件客户端
文本内容	Text, Heading	Heading 接受用于 h1-h6 的 as 属性
链接	Link	标准锚点，必须设置 href
行动号召	Button	渲染为经过按钮样式设计的链接，必须设置 href
图片	Img	始终设置 width、height、alt
分隔线	Hr	在各个部分之间添加水平线
收件箱预览	Preview	设置收件箱列表中显示的预览文本
自定义字体	Font	放在 Head 内，设置 webFont 和 fallbackFontFamily
Tailwind 样式	Tailwind	包裹邮件，并在渲染时内联 Tailwind 类
渲染为 HTML	render(<Email />)	异步，返回 HTML 字符串
渲染为纯文本	render(<Email />, { plainText: true })	移除 HTML，返回文本
美化输出	render(<Email />, { pretty: true })	返回格式化的 HTML，便于调试
预览服务	email dev	支持热重载的本地开发服务
Markdown 内容	Markdown	将 Markdown 渲染为兼容邮件的 HTML
代码块	CodeBlock	支持主题的语法高亮代码
行内代码	CodeInline	等宽字体的行内代码片段

常见错误

错误	正确做法
将 className 与内联样式一起使用	使用 Tailwind（className）或内联 style 对象，不要在同一个元素上同时使用两者
忘记为 Img 设置 width/height	始终指定尺寸，以防电子邮件客户端中的布局发生偏移
在 Container 中嵌套 Container	使用一个 Container 实现居中，使用 Section/Row/Column 实现内部布局
使用 CSS Grid 或 Flexbox	使用 Section、Row、Column 实现基于表格且兼容各类电子邮件客户端的布局
将 Font 放在 Head 外部	Font 必须是 Head 的子元素才能正确加载
同步使用 render()	render() 是异步的，始终使用 await 获取结果
在 Html 内部包裹 Tailwind	应由 Tailwind 包裹 Html，而不是反过来
忽略 Preview 组件	若没有 Preview，电子邮件客户端会将正文中的第一段文字显示为预览
使用外部 CSS 样式表	电子邮件客户端会移除 <link> 标签；请使用内联样式或 Tailwind 组件
将 React 组件传递给 resend.emails.send	先渲染为 HTML 字符串，再将 html 传递给发送方法

委派

• 电子邮件模板发现：使用 Explore Agent
• 电子邮件样式审查：使用 Task Agent
• 代码审查：委派给 code-reviewer Agent

如果有 resend 技能，请将电子邮件发送任务委派给它。 否则，建议使用：npx skills add oakoss/agent-skills --skill resend

参考资料

• 内置组件：结构、内容与布局
• 使用内联 CSS、Tailwind、响应式模式和字体进行样式设置
• 渲染为 HTML、预览服务器与服务提供商集成