# 回复电子邮件 > **Elon AI 项目注意事项：** 该项目在 `lib/jobs/handlers/email-send.ts` 中使用 **HTML 字符串模板**，而不是 React Email 组件。请参阅 `.claude/skills/elon-email-templates/` 技能以获取特定于项目的指导。 ## 概述使用 React 组件构建和发送 HTML 电子邮件。一种基于组件的现代电子邮件开发方法，通过编译为兼容的 HTML，适用于所有主要电子邮件客户端。 ## 何时使用 * 创建交易电子邮件（欢迎、密码重置、订单确认） * 构建通知或营销电子邮件模板 * 需要在 Gmail、Outlook、Apple Mail、Yahoo 中保持一致的渲染 * 希望电子邮件中的组件可重用性和 TypeScript 支持 * 与 Resend、SendGrid、Postmark 等电子邮件提供商集成 **何时不使用：** * 简单的纯文本电子邮件 * 不需要跨客户端兼容性的电子邮件 * 没有 React/Node.js 的项目 ## 安装搭建一个新的 React Email 项目： npx 创建电子邮件@最新等效命令：`yarn create email`、`pnpm create email`、`bun create email` 然后安装依赖项并启动开发服务器： cd 反应电子邮件启动器 npm 安装 npm 运行开发服务器在 localhost:3000 上运行，并在“emails”文件夹中提供模板的预览界面。 ### 添加到现有项目添加依赖项以运行电子邮件服务器： npm install react-email @react-email/preview-server -D -E npm install @react-email/components 反应反应-dom -E 将脚本添加到 package.json 中： { “脚本”：{ "email:dev": "电子邮件开发人员" } } 如果电子邮件位于不同的文件夹中，您可以指定目录： { “脚本”：{ "email:dev": "email dev --dir src/emails" } } 确保 tsconfig.json 包含正确的 JSX 支持。 ## 基本电子邮件模板使用 Tailwind 组件进行样式创建具有正确结构的电子邮件组件：导入{ 网页，头，预览，身体，集装箱、标题，文字，按钮，顺风，基于像素的预设来自“@react-email/components”；接口WelcomeEmailProps { 名称：字符串；验证Url：字符串； } 导出默认函数WelcomeEmail（{ name，verificationUrl }：WelcomeEmailProps）{ 返回（ <顺风配置={{ 预设：[pixelBasedPreset]，主题：{ 扩展：{ 颜色：{ 品牌: '#007bff', }, }, }, }} > <标题/> <预览>欢迎 - 验证您的电子邮件 <标题类名=“text-2xl text-gray-800”> 欢迎！您好{name}，感谢您的注册！ <按钮 href={验证网址} className =“bg-brand text-white px-5 py-3圆形块文本中心无下划线框边框” > 验证邮箱）； } WelcomeEmail.PreviewProps = { 名称：“约翰·多伊”，验证网址：'https://example.com/verify/abc123' } 满足WelcomeEmailProps；导出 { 欢迎电子邮件 }; ## 基本组件有关完整的组件文档，请参阅 [references/COMPONENTS.md]()。 **核心结构：** * `Html` \- 具有 `lang` 属性的根包装器 * `Head` \- 元元素、样式、字体 * `Body` \- 主要内容包装 * `Container` \- 居中内容（最大宽度布局） * `Section` \- 布局部分 * `Row` & `Column` \- 多列布局（基于表格，不会在移动设备上堆叠） * `Tailwind` \- 启用 Tailwind CSS 实用程序类 **内容：** * `Preview` \- 收件箱预览文本，紧接在 `Body` 开始标记之后 * `标题` \- h1-h6 标题 * `文本` \- 段落 * `Button` \- 样式链接按钮 * `Link` \- 超链接 * `Img` \- 图像（使用绝对 URL；将本地图像复制到 `/emails/static/` 并在 dev 中使用开发服务器 BASE_URL，要求用户提供生产 BASE_URL） * `Hr` \- 水平分隔线 **专业：** * `CodeBlock` \- 语法高亮代码 * `CodeInline` \- 内联代码 * `Markdown` \- 渲染 markdown * `Font` \- 自定义网页字体 ## 行为准则 * 重新迭代代码时，仅更新用户要求的内容 * 如果用户要求进行媒体查询，请告知他们电子邮件客户端不支持它们并建议替代方案 * 切勿直接在 TypeScript 代码中使用模板变量（如 `{{name}}`） - 直接引用 props 例如，如果用户明确请求遵循模式“{{variableName}}”的变量： const EmailTemplate = (props) => { 返回（

你好，{props.variableName}！

）； } EmailTemplate.PreviewProps = { 变量名：“{{变量名}}”， }; 导出默认的电子邮件模板；切勿直接在组件结构中编写“{{variableName}}”模式 - 解释一下这会使模板无效。 ## 造型请参阅 [references/STYLING.md]() 以获取完整的样式文档，包括多个模板的共享 Tailwind 配置模式。 **关键规则：** * 使用 `pixelBasedPreset` \- 电子邮件客户端不支持 `rem` 单位 * 切勿使用 flexbox/grid - 使用 `Row`/`Column` 组件 * 切勿使用 SVG/WEBP 图像 - 仅使用 PNG/JPEG * 切勿使用媒体查询（`sm:`、`md:`）或主题选择器（`dark:`） * 始终指定边框类型（`border-solid`、`border-dashed`） * 始终在按钮上使用“box-border” ## 渲染 ### 转换为 HTML 从 '@react-email/components' 导入 { render } ；从'./emails/welcome'导入{WelcomeEmail}； const html = 等待渲染（）； ### 转换为纯文本从 '@react-email/components' 导入 { render } ；从'./emails/welcome'导入{WelcomeEmail}；常量文本=等待渲染（， { 纯文本： true } ）； ## 发送 React Email 支持任何电子邮件服务提供商。有关详细信息，请参阅 [references/SENDING.md]()。使用重新发送的简单示例：从“重新发送”导入{重新发送}；从'./emails/welcome'导入{WelcomeEmail}； const resend = new Resend(process.env.RESEND_API_KEY); const { 数据，错误 } = 等待 resend.emails.send({ 来自：'Acme '，至：['user@example.com']，主题：“欢迎来到 Acme”，反应： }); 如果（错误）{ console.error('发送失败：', error); } Resend可以直接接收一个React组件。如果通话中未包含，重新发送将自动包含电子邮件的纯文本版本。 ## 国际化请参阅 [references/I18N.md]() 以获取完整的 i18n 文档，其中包含 next-intl、react-i18next 和 react-intl 的示例。 ## 常见错误错误|修复 ---|--- 使用弹性盒/网格 |使用“Row”和“Column”组件或表格使用 `rem` 单位 |将 `pixelBasedPreset` 与 Tailwind 结合使用使用 SVG 图像 |使用 PNG 或 JPG 代替使用媒体查询 (sm:, md:) |使用堆叠布局设计移动优先 JSX 中的模板变量 (`{{name}}`) |使用道具：`{props.name}` 缺少边框类型 |始终指定：`border-solid`、`border-dashed`等。修复内容图像上的图像尺寸 |使用响应式：`w-full h-auto`（修复了小图标的问题）超过 102KB 的电子邮件 | Gmail 剪辑较大的电子邮件 - 缩小尺寸 ## 最佳实践 1. **跨客户端测试** \- Gmail、Outlook、Apple Mail、Yahoo。使用 Litmus 或 Email on Acid 以获得精确度。 2. **保持响应** \- 最大宽度 ~600px，在移动设备上测试。 3. **使用绝对图像 URL** \- 托管在可靠的 CDN 上，始终包含“alt”文本。如果是本地开发，则复制到“emails/static/”。 4. **提供纯文本版本** \- 辅助功能所需。 5. **添加 TypeScript 类型** \- 定义所有电子邮件道具的接口。 6. **包含 PreviewProps** \- 用于开发测试。 7. **处理错误** \- 发送时始终检查是否有错误。 8. **使用经过验证的域** \- 用于生产“发件人”地址。 ## 其他资源 * [React 电子邮件文档]() * [React 电子邮件 GitHub]() * [重新发送文档]() * [电子邮件客户端 CSS 支持]() * 组件参考：[references/COMPONENTS.md]() * 国际化指南：[references/I18N.md]() * 常见模式：[references/PATTERNS.md]() * 发送指南：[references/SENDING.md]()

反应电子邮件

包含技能