OA0 = Omni AI 0

OA0 是一个探索 AI 的论坛

现在注册

已注册用户请登录

name: react-email
description: 使用 React Email 和 React 组件创建美观、响应式的 HTML 邮件。构建包含现代组件的事务性邮件，支持国际化，并可集成 Resend 等邮件服务提供商。适用于创建欢迎邮件、密码重置、通知、订单确认或任何 HTML 邮件模板。
license: MIT
metadata:
author: Resend
repository: https://github.com/resend/react-email

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 文件夹中的邮件模板。

立即执行：完成上述 TODO 列表以实现：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>欢迎 - 验证您的邮箱</Preview>
        <Body className="bg-gray-100 font-sans">
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              欢迎！
            </Heading>
            <Text className="text-base text-gray-800">
              你好 {name}，感谢注册！
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline"
            >
              验证邮箱
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// 用于测试的预览属性
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 工具类

内容：
- Preview - 收件箱预览文本，始终位于 Body 内的第一个
- Heading - h1 到 h6 标题
- Text - 段落
- Button - 带样式的链接按钮
- Link - 超链接
- Img - 图片（使用绝对 URL）（开发模式下使用开发服务器的 BASE_URL；生产环境请用户提供站点的 BASE_URL；根据环境动态生成图片 URL。）
- Hr - 水平分隔线

特殊组件：
- CodeBlock - 语法高亮的代码块
- CodeInline - 行内代码
- Markdown - 渲染 Markdown
- Font - 自定义网页字体

行为准则

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

const EmailTemplate = (props) => {
  return (
    {/* ... 其余代码 ... */}
    <h1>你好，{props.variableName}！</h1>
    {/* ... 其余代码 ... */}
  );
}

EmailTemplate.PreviewProps = {
  // ... 其余属性 ...
  variableName: "{{variableName}}",
  // ... 其余属性 ...
};

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）

组件结构

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

const Email = (props) => {
  return (
    <div>
      <a href={props.source}>点击这里，如果你想要糖果 👀</a>
    </div>
  );
}

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

默认结构

Body: font-sans py-10 bg-gray-100
Container: 白色，居中，内容左对齐
Footer: 物理地址，退订链接，带 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: '欢迎来到 Acme',
  react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});

if (error) {
  console.error('发送失败：', error);
}

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

国际化

完整的 i18n 文档请参阅 references/I18N.md。

React Email 支持三个 i18n 库：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": "你好",
    "body": "感谢注册！",
    "cta": "开始使用"
  }
}

邮件最佳实践

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

常见模式

完整的示例请参阅 references/PATTERNS.md，包括：
- 密码重置邮件
- 包含产品列表的订单确认
- 带有代码块的通知邮件
- 多列布局
- 带有自定义字体的邮件模板

额外资源

技能包地址：https://github.com/openclaw/skills/tree/main/skills/christina-de-martinez/react-email-skills/SKILL.md

3 次点击 ∙ 0 人收藏

登录后收藏

目前尚无回复

0 条回复

react-email-skills: 创建精美且响应式的 HTML 邮件

React Email

安装

进入项目目录

安装依赖

启动开发服务器

验证安装

安装说明

更新或创建 tsconfig.json

基础邮件模板

核心组件

行为准则

样式考量

邮件客户端限制

组件结构

默认结构

排版

图片

按钮

布局

深色模式

最佳实践

渲染

转换为 HTML

转换为纯文本

发送

国际化

快速示例（next-intl）

邮件最佳实践

常见模式

额外资源