SuperAPI AI 工具集

react-email

办公与效率

查看项目

更新于 10-16 07:58

技能介绍

用途:React Email 让开发者用 React 组件编写 HTML 邮件模板,替代手写表格布局,适用于事务邮件、营销邮件等场景。安装:npm i react-email;或脚手架:npx create-email@latest,再 cd react-email-starter、npm install、npm run dev,支持 npm、yarn、pnpm、bun。开发服务器默认运行在 localhost:3000,预览 emails 目录下的模板。

主要能力:提供 Html、Head、Body、Container、Section、Row、Column、Preview、Heading、Text、Button、Link、Img、Hr、CodeBlock、Markdown、Font、Tailwind 等组件;可用 Tailwind(需 pixelBasedPreset,因邮件客户端不支持 rem)和内联样式。支持 render 渲染为 HTML 或纯文本(plainText: true),可配合 Resend、Nodemailer、SendGrid 等发送。CLI 提供 email dev、email build、email start、email export、email resend setup/reset。内置可视化编辑器 @react-email/editor(基于 TipTap/ProseMirror),含 EmailEditor、StarterKit、Inspector、EmailTheming、composeReactEmail 等。

使用方式:图片放在 emails/static 目录,通过 NODE_ENV 切换开发与生产 CDN 地址,勿硬编码 localhost:3000;组件中直接引用 props,模板变量放 PreviewProps。

限制:邮件客户端多不支持媒体查询(sm:、md:、lg:、xl:)和主题选择器(dark:、light:),应避免使用;禁用 flexbox/grid,改用 Row/Column 或表格;不支持 SVG、WEBP 图片;边框须显式指定类型;Button 需 box-border;单边边框先 border-none;Gmail 会裁剪超过 102KB 的邮件。部分参考资料中提到但未在本文展开的收费、价格、平台或效果信息暂未提供。