SuperAPI AI 工具集

react-email

营销与增长

查看项目

更新于 10-15 20:32

技能介绍

用途:用 React Email 6 编写和审查邮件模板,产出在 Gmail、Outlook Windows、Apple Mail、iOS Mail、Yahoo 等客户端可正常显示的 HTML 邮件,并兼顾无障碍与视觉节奏。

主要能力:统一包 react-email(v6),新项目不要安装 @react-email/components;预览用 @react-email/ui。安装:npm i react-email @react-email/ui。从 react-email 导入 Html、Head、Body、Container、Section、Row、Column、Text、Heading、Button、Img、Link、Hr、Preview、Font、render。render(<Email />) 生成 HTML,render(<Email />, { plainText: true }) 生成纯文本部分,两者都应发送。

使用方式:模板放在 emails/ 下,用 _layout.tsx 共享约 600px 布局,按 auth、transactional、marketing 分类;props 类型化,不在邮件内做数据请求,由调用方传入已解析数据。结构用 Container + Section + Row/Column,不用 flex/grid/div;样式用内联 style 对象,<style> 仅用于最小 reset 与渐进式 dark mode;CTA 用 Button 组件;Img 必须有 width、height、alt;Html 设 lang;Preview 写 40–90 字符有效摘要。

适用场景:认证邮件(魔法链接)、交易邮件(收据)、欢迎与电商邮件。

限制:不支持 JavaScript、交互表单、视频自动播放,也不要把 Web 字体作为唯一字体;颜色用十六进制,避免 oklch、color-mix 或仅靠 CSS 变量;图片用 HTTPS 托管,避免 SVG 作为关键内容与重型 base64;Gmail 深色模式可能反转颜色,需保证两种模式对比度;本地预览不能替代 Outlook Windows,需真实测试。无障碍要求:每封邮件一个 h1、正文 ≥14px、行高约 1.5、链接文字明确、对比度达 WCAG AA、信息不只靠颜色、CTA 触控高度约 44px。发送时同时提供 HTML 与 text/plain,营销邮件加 List-Unsubscribe。