使用 React 组件构建和发送 HTML 电子邮件 - 一种现代的、基于组件的电子邮件开发方法，适用于所有主要电子邮件客户端。

安装 创建一个新 React Email 项目，安装依赖项，并启动开发服务器： npx create-email@latest cd react-email-starter npm install npm run dev 这适用于任何包管理器（npm、yarn、pnpm、bun）- 根据需要替换。开发服务器在 localhost:3000 运行，具有用于 emails 文件夹中的模板的预览界面。

添加到现有项目 安装包并将脚本添加到 package.json： { "scripts": { "email": "email dev --dir emails --port 3000" } } 确保 emails 文件夹的路径相对于基项目目录。确保 tsconfig.json 包含对 JSX 的适当支持。

基本电子邮件模板 使用 Tailwind 组件进行样式化，创建具有适当结构的电子邮件组件： import { Html, Head, Preview, Body, Container, Heading, Text, Button, Tailwind, pixelBasedPreset } from '@react-email/components'; interface WelcomeEmailProps { name: string; verificationUrl: string; } export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) { return ( Welcome - Verify your email Welcome! Hi {name}, thanks for signing up! Verify Email ); } // Preview props for testing WelcomeEmail.PreviewProps = { name: 'John Doe', verificationUrl: 'https://example.com/verify/abc123' } satisfies WelcomeEmailProps; export { WelcomeEmail };

行为准则 在迭代代码时，只更新用户请求的内容。保持其余部分不变。如果用户要求使用媒体查询，告知他们大多数电子邮件客户端不支持媒体查询，并建议使用不同的方法。永远不要在 TypeScript 代码中直接使用模板变量（如 {{name}}）。相反，直接引用底层属性。如果用户明确要求使用 {{variableName}}，仅在 PreviewProps 中放置 mustache 字符串，从不在组件 JSX 中： const EmailTemplate = (props) => { return (

Hello, {props.variableName}!

基本组件 请参阅 references/COMPONENTS.md 以获取完整的组件文档。 核心结构： Html - 根包装器，具有 lang 属性 Head - 元数据、样式、字体 Body - 主内容包装器 Container - 最外层居中包装器（具有内置的 max-width: 37.5em）。每封电子邮件仅使用一次。 Section - 内容块（无内置 max-width）。用于在 Container 内部分组内容。 Row & Column - 多列布局 Tailwind - 启用 Tailwind CSS 实用程序类 内容： Preview - 收件箱预览文本，始终在 内部 Heading - h1-h6 标题 Text - 段落 Button - 样式化链接按钮（始终包含 box-border） Link - 超链接 Img - 图片（请参阅下面的静态文件部分） Hr - 水平分隔线 专用： CodeBlock - 语法高亮代码 CodeInline - 内联代码 Markdown - 渲染 Markdown Font - 自定义 Web 字体

编写代码前 当用户请求电子邮件模板时，如果他们没有提供，请先询问以下问题： 品牌颜色 - 询问主要品牌颜色（十六进制代码，如 #007bff） Logo - 询问是否有 Logo 文件及其格式（仅 PNG/JPG - 警告如果是 SVG/WEBP） 样式偏好 - 专业、随意或极简主义 生产 URL - 静态资产将在生产中托管在哪里？ 静态文件和图像 目录结构 本地图像必须放在 emails 目录内的 static 文件夹中： project/ ├── emails/ │ ├── welcome.tsx │ └── static/ │ └── logo.png 开发与生产 URL 使用此模式以便在开发预览和生产中使用的图像： const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.example.com" : ""; export default ...