React 邮件模板组件库

邮件模板为什么难写

邮件客户端的渲染引擎差异巨大。同样的 HTML 在 Gmail、Outlook 和 Apple Mail 中可能呈现完全不同的布局：表格内边距被忽略、CSS 支持不完整、暗黑模式下纯黑背景配纯白文字。手工编写 table 嵌套的邮件 HTML 难以维护，测试成本极高——每次模板调整都要在多个客户端逐一验证。

它的工作方式

React Email 把邮件模板当作 React 组件来写：用熟悉的 JSX 语法组合 <Container>、<Section>、<Button> 等组件，通过 style 属性指定样式。核心能力包括：

• 跨客户端一致性：组件把 React 结构渲染为兼容的 HTML 与内联 CSS，自动处理 Outlook 的 MSO 条件注释等历史包袱；
• 暗黑模式支持：生成适配 prefers-color-scheme 的样式，避免默认黑底白字的刺眼效果；
• 标准 HTML 输出：渲染结果可投递到任意邮件服务商（如 Resend、SendGrid），不强绑定发送渠道。

适用边界与注意点

• 它解决的是模板结构与样式一致性，不替代发送基础设施，仍需配合 ESP 使用；
• 邮件客户端对 position 等 CSS 能力支持有限，复杂交互动效难以实现；
• 组件库仍在演进，Outlook 的 Word 渲染引擎等平台特性需要针对具体情况测试，不能完全假设一次编写处处可用。