用途:React Email 用于以 React 组件方式构建响应式 HTML 邮件,适合事务性邮件(欢迎、重置密码、收据)、营销模板、邮件设计系统,以及任何在服务端渲染邮件的项目。不适合无动态内容的静态 HTML 模板、已使用 MJML 或 Maizzle 等专用邮件构建器的项目,或只需纯文本邮件的情况。
主要能力:提供文档结构组件 Html、Head、Body,内容容器 Container,表格布局 Section、Row、Column,文本组件 Text、Heading(as 属性支持 h1-h6),链接 Link、按钮 Button(渲染为链接样式,需 href)、图片 Img、分隔线 Hr、收件箱预览 Preview、自定义字体 Font(置于 Head 内,设置 webFont 与 fallbackFontFamily)。支持 Tailwind 组件在渲染时内联类名,也支持 Markdown、CodeBlock、CodeInline。
使用方式:用 render(<Email />) 异步渲染为 HTML 字符串,可加 { plainText: true } 输出纯文本,或 { pretty: true } 输出格式化 HTML 便于调试;本地用 email dev 启动带热重载的预览服务器。发送时先渲染为 HTML 字符串,再把 html 传给发送方法。
限制与常见错误:不要在同一元素混用 className 与内联 style;Img 必须设置 width、height、alt;不要嵌套 Container,内层布局用 Section/Row/Column;避免 CSS Grid 或 Flexbox;Font 必须放在 Head 内;render() 是异步的需 await;Tailwind 包裹 Html 而非相反;省略 Preview 时客户端会显示正文首段;邮件客户端会剥离外部 CSS 的 link 标签,应使用内联样式或 Tailwind 组件。若 resend 技能可用,可将邮件投递任务交给它,否则可运行 npx skills add oakoss/agent-skills --skill resend。