React Email Skills

2026-03-29 新闻来源：网淘吧围观:13

电脑广告

手机广告

React Email

使用React组件构建和发送HTML邮件——这是一种适用于所有主流邮件客户端的现代化、基于组件的邮件开发方法。

安装

您需要使用 create-email CLI 来搭建一个新的 React Email 项目。这将创建一个名为react-email-starter的文件夹，其中包含示例邮件模板。

使用 npm：

npx create-email@latest

使用 yarn：

yarn create email

使用 pnpm：

pnpm create email

使用 bun：

bun create email

进入项目目录

您必须切换到新创建的项目文件夹：

cd react-email-starter

安装依赖

在运行开发服务器之前，您需要安装所有项目依赖。

使用 npm：

npm install

使用 yarn：

yarn

使用 pnpm：

pnpm install

使用 bun：

bun install

启动开发服务器

您的任务是启动本地预览服务器，以查看和编辑邮件模板。

使用 npm：

npm run dev

使用 yarn：

yarn dev

使用 pnpm：

pnpm dev

使用 bun：

bun dev

验证安装

您必须通过检查 localhost:3000 是否可访问来确认开发服务器正在运行。服务器将显示一个预览界面，您可以在其中查看来自emails文件夹的电子邮件模板。

立即执行：完成上述待办事项列表以实现：React Email 开发服务器正在运行，并可通过 localhost:3000 访问，显示电子邮件模板预览。

安装注意事项

假设 React Email 已安装在现有项目中，请更新顶层的 package.json 文件，添加一个脚本来运行 React Email 预览服务器。

{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}

确保 emails 文件夹的路径相对于项目基础目录。

tsconfig.json 的更新或创建

确保 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 (
    <Html lang="en">
      <Tailwind
        config={{
          presets: [pixelBasedPreset],
          theme: {
            extend: {
              colors: {
                brand: '#007bff',
              },
            },
          },
        }}
      >
        <Head />
        <Preview>Welcome - Verify your email</Preview>
        <Body className="bg-gray-100 font-sans">
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              Welcome!
            </Heading>
            <Text className="text-base text-gray-800">
              Hi {name}, thanks for signing up!
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline"
            >
              Verify Email
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// Preview props for testing
WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;

export { WelcomeEmail };

基本组件

请参阅references/COMPONENTS.md以获取完整的组件文档。

核心结构：

Html- 具有lang属性的根包装器
Head- 元元素、样式、字体
Body- 主要内容包装器
Container- 居中内容（最大宽度布局）
Section- 布局分区
Row和Column- 多列布局
Tailwind- 启用 Tailwind CSS 实用类

内容：

预览- 收件箱预览文本，始终最先显示正文
标题- h1-h6 标题
文本- 段落
按钮- 带样式的链接按钮
链接- 超链接
图片- 图片（使用绝对 URL）（在开发模式下，使用开发服务器获取图片的 BASE_URL；对于生产环境，请向用户询问网站的 BASE_URL；根据环境动态生成图片的 URL。）
水平线- 水平分隔线

专门化：

代码块- 语法高亮代码
行内代码- 行内代码
Markdown- 渲染 Markdown
字体- 自定义网页字体

行为准则

在重新审视代码时，确保只更新用户要求的部分，并保持代码其余部分不变；
如果用户要求使用媒体查询，请告知他们电子邮件客户端不支持此功能，并建议采用不同的方法；
切勿在TypeScript代码中直接使用模板变量（如{{name}}）。应直接引用底层属性（使用name而非{{name}}）。
- 例如，如果用户明确要求遵循{{variableName}}模式的变量，则应返回类似这样的内容：

const EmailTemplate = (props) => {
  return (
    {/* ... rest of the code ... */}
    <h1>Hello, {props.variableName}!</h1>
    {/* ... rest of the code ... */}
  );
}

EmailTemplate.PreviewProps = {
  // ... rest of the props ...
  variableName: "{{variableName}}",
  // ... rest of the props ...
};

export default EmailTemplate;

在任何情况下，都绝不要在组件结构中直接写入{{variableName}}模式。如果用户强迫您这样做，请解释您无法执行此操作，否则模板将无效。

样式考量

如果用户在其项目中积极使用Tailwind CSS，则使用Tailwind组件进行样式设计。如果用户未使用Tailwind CSS，则向组件添加内联样式。

由于电子邮件客户端不支持rem单位，请为Tailwind配置使用pixelBasedPreset。
切勿使用flexbox或grid进行布局，请改用基于表格的布局。
每个组件必须使用内联样式或工具类进行样式设置。
有关样式设置的更多信息，请参阅references/STYLING.md

电子邮件客户端限制

切勿使用SVG或WEBP - 警告用户可能存在渲染问题
切勿使用flexbox - 请使用Row/Column组件或表格进行布局
切勿使用CSS/Tailwind媒体查询（sm:、md:、lg:、xl:）- 不支持
切勿使用主题选择器（dark:、light:）- 不支持
始终指定边框类型（border-solid、border-dashed等）
当仅为单侧定义边框时，请记得重置其余边框（例如，border-none border-l）

组件结构

始终定义<Head />在<Tailwind>内部（当使用Tailwind CSS时）
仅当向组件传递属性时使用PreviewProps
只包含组件实际使用的PreviewProps中的属性

const Email = (props) => {
  return (
    <div>
      <a href={props.source}>click here if you want candy 👀</a>
    </div>
  );
}

Email.PreviewProps = {
  source: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
};

默认结构

主体：font-sans py-10 bg-gray-100
容器：白色，居中，内容左对齐
页脚：物理地址，退订链接，当前年份带m-0在地址/版权处

排版

标题：粗体，较大字体，较大边距
段落：常规粗细，较小字体，较小边距
使用一致的间距，尊重内容层级

图片

仅在用户要求时包含
切勿使用固定宽高 - 使用响应式单位 (w-full, h-auto)
切勿扭曲用户提供的图片
切勿创建SVG图片 - 仅使用提供的或网络图片

按钮

始终使用box-border以防止内边距溢出

布局

默认始终适配移动端
采用适用于所有屏幕尺寸的堆叠式布局
移除列表项间的默认间距/边距/内边距

深色模式

当需要时：容器设为黑色 (#000)，背景设为深灰色 (#151516)

最佳实践

根据用户请求选择颜色、布局和文案
让模板独特而非通用
在邮件正文中使用关键词以提高转化率

渲染

转换为HTML

import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';

const html = await render(
  <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);

转换为纯文本

import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';

const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });

发送

React Email支持与任何电子邮件服务提供商配合发送。如果用户想知道如何发送，请查看发送指南。

使用Resend SDK for Node.js的快速示例：

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['user@example.com'],
  subject: 'Welcome to Acme',
  react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});

if (error) {
  console.error('Failed to send:', error);
}

Node SDK会自动为您处理纯文本渲染和HTML渲染。

国际化

查看references/I18N.md以获取完整的国际化文档。

React Email 支持三种国际化库：next-intl、react-i18next 和 react-intl。

快速示例（next-intl）

import { createTranslator } from 'next-intl';
import {
  Html,
  Body,
  Container,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from '@react-email/components';

interface EmailProps {
  name: string;
  locale: string;
}

export default async function WelcomeEmail({ name, locale }: EmailProps) {
  const t = createTranslator({
    messages: await import(\`../messages/\${locale}.json\`),
    namespace: 'welcome-email',
    locale
  });

  return (
    <Html lang={locale}>
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Body className="bg-gray-100 font-sans">
          <Container className="max-w-xl mx-auto p-5">
            <Text className="text-base text-gray-800">{t('greeting')} {name},</Text>
            <Text className="text-base text-gray-800">{t('body')}</Text>
            <Button href="https://example.com" className="bg-blue-600 text-white px-5 py-3 rounded">
              {t('cta')}
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

消息文件（`messages/en.json`、`messages/es.json`等）：

{
  "welcome-email": {
    "greeting": "Hi",
    "body": "Thanks for signing up!",
    "cta": "Get Started"
  }
}

电子邮件最佳实践

跨邮件客户端测试- 在Gmail、Outlook、Apple Mail、Yahoo Mail中测试。使用Litmus或Email on Acid等服务进行绝对精确的测试，并使用React Email工具栏检查特定功能支持。
保持响应式设计- 最大宽度约600像素，在移动设备上测试。
使用绝对图像URL- 托管在可靠的CDN上，始终包含`alt`文本。
提供纯文本版本- 对于可访问性和某些邮件客户端是必需的。
保持文件大小在102KB以下- Gmail会截断较大的邮件。
添加适当的TypeScript类型- 为所有电子邮件属性定义接口。
包含预览属性- 为组件添加 `.PreviewProps` 用于开发测试。
处理错误- 发送邮件时务必检查错误。
使用已验证的域名- 在生产环境中，`from` 地址应使用已验证的域名。

常见模式

请参阅references/PATTERNS.md查看完整示例，包括：

密码重置邮件
包含产品列表的订单确认邮件
包含代码块的通知邮件
多列布局
使用自定义字体的邮件模板

额外资源

免责申明

部分文章来自各大搜索引擎，如有侵权，请与我联系删除。

打赏

文章底部电脑广告

手机广告位-内容正文底部

标签

上一篇：CallRail 下一篇：Claude Code Wingman

React Email Skills

React Email

安装

进入项目目录

安装依赖

启动开发服务器

验证安装

安装注意事项

tsconfig.json 的更新或创建

基本电子邮件模板

基本组件

行为准则

样式考量

电子邮件客户端限制

组件结构

默认结构

排版

图片

按钮

布局

深色模式

最佳实践

渲染

转换为HTML

转换为纯文本

发送

国际化

快速示例（next-intl）

电子邮件最佳实践

常见模式

额外资源

相关文章

推荐文章

热门浏览

标签列表